- 締切済み
JavaScriptで特定のtdタグにclass名をつけたい
指定のdiv内にある一行目（もしくは、最初の3つ）のtdタグに対して JavaScriptでClass名を付けたいのですが、どのようにすればよいでしょうか？ 【HTML参考】 <div id="box"> <table> <tr> <td>セル１</td> <td>セル２</td> <td>セル３</td> </tr> <tr> <td>セル４</td> <td>セル５</td> <td>セル６</td> </tr> </table> </div> 上記のような時、div#box内の「セル１～３」に対してclass名を付けたいと言った場合です。 よろしくお願いいたします。
- JavaScript
- 回答数6
- ありがとう数8
- みんなの回答 （6）
- 専門家の回答
みんなの回答
<html> <head><style> .red{ background-color:#c00; } </style></head> <body> <div id="box"> <table id="tb"> <tr> <td>セル１</td> <td>セル２</td> <td>セル３</td> </tr> <tr> <td>セル４</td> <td>セル５</td> <td>セル６</td> </tr> </table> </div> <script> window.onload=function(){ ob = document.getElementById('tb').rows[0].cells; for(i=0;i<ob.length;i++) ob[i].className='red'; } </script> </body> </html> 直感的で俺はこれが楽。
- himajin100000
- ベストアンサー率54% (1660/3060)
あともう一つ動かない原因あった。 gooのシステムが U+005CをU+00A5に置き換えてた気がする。
- himajin100000
- ベストアンサー率54% (1660/3060)
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Q237452 TestCase 1</title> <style type="text/css"> table{ border-collapse:separate; } td.special{ border-style:solid; background-color:red; border-color:green; border-width:medium; } </style> <script type="application/ecmascript"><![CDATA[ function initialize(){ var tds = document.evaluate("//xhtml:div[@id='box']/xhtml:table/xhtml:tr[1]/xhtml:td",document.documentElement,getNS,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null); for (var i = 0; i < tds.snapshotLength;i++){ var attr = tds.snapshotItem(i).getAttributeNode("class"); var attrval = ""; if (attr !== null){ attrval = attr.nodeValue; } var arr = attrval.split(new RegExp("[\\u0009|\\u0020|\\u000A|\\u0000C|\\u000D]","g")); for (var j = 0;j < arr.length;j++){ if (arr[j] == ""){ arr.splice(j,1); } } if (arr.indexOf("special") < 0){ arr.push("special"); } attrval = arr.join("\u0020"); tds.snapshotItem(i).setAttribute("class",attrval); } } function getNS(prefix){ switch(prefix){ case "xhtml": return "http://www.w3.org/1999/xhtml"; default: throw new RangeError(); } } ]]></script> </head> <body onload="initialize();"> <div id="box"> <table> <tr> <td>セル１</td> <td>セル２</td> <td>セル３</td> </tr> <tr> <td>セル４</td> <td>セル５</td> <td>セル６</td> </tr> </table> </div> </body> </html> <!-- Q. 今までの回答でgetAttributeを使ってたのに，何でgetAttributeNodeなんていう回りくどい記述をしているんですか？ A. W3Cの仕様と違うことに気づいてショックを受けたからです。MDCのgetAttributeメソッドのNotesを見てください。 Q.Mozilla,Safari,Operaで動作しないんですが。 可能性として二つ。 一つはapplication/xhtml+xmlで配布していないことが原因です。 text/htmlで配布する場合XPathの名前空間接頭辞を取り外し， 引数として与えている名前空間リゾルバをnullにしてください。 もう一つは，gooのシステムがURIっぽい文字列の前後に文字を埋め込むため，これを削除しないと正しい名前空間宣言として認識してくれなかったり，名前空間リゾルバ中の文字列リテラルが崩れたりします。かなり苦労しないと回答時には直せないので直しません。 Q. IEで動作しないんですが。 A. 理由は色々ありますが，直す気がありません。 application/xhtml+xmlをIEが読まないこと。 application/ecmascriptをIEが読まないこと document.evaluateがIEにないこと Q.他に言いたいことは？ A.getElementByIdは単一の要素返すからElementですけど， getElementsByTagNameはノードリストなのでElementsなんですよね…。 -->
- OKbokuzyo
- ベストアンサー率43% (130/296)
No2です。質問の趣旨を捉え違えていたようです。ごめんなさい。。。 １行目だけ取りたいなら以下のような方法でいかがでしょうか？ var divNode = document.getElementById("box"); var trNodeList = divNode.getElementByTagName("TR"); var tdNodeList = trNodeList[0].getElementByTagName("TD");
- OKbokuzyo
- ベストアンサー率43% (130/296)
DOMを利用しても良いですが どちらかというとJavaScript(HTML)では classNameプロパティを使う人の方が多いかと思います。 var divNode = document.getElementById("box"); var tdNodeList = divNode.getElementByTagName("TD"); for(var i = 0; i < tdNodeList.length; i++) { tdNodeList[i].className = "ClassName"; } こんな感じでしょう。（※誤字あったらスマソ） ちなみに上記例では「セル１～６」に対してclass名を付けています。
- SAYKA
- ベストアンサー率34% (944/2776)
答えをそのまま書くのは約束でできないからヒントを ・div['box']の中の「td」群を取り出す。 ・該当する値が入っているなら class という名前の「属性」に値を書き込む こんな流れになるよ。 http://www.tohoho-web.com/js/dom.htm#getElementsByTagName 「javascript dom」辺りで探すと良いよ。
関連するQ&A
- JavaScriptを入れるとｔdタグ内の高さが広がる
CSSにて高さ指定もしてあるのですが、JavaScriptの記載あるtdタグの高さがIEだと広がってしまいます。 この現象はFireFoxだと現れません。 下記コードですと3段目と4段目のtdの高さが他の段に比べ広がってしまいます。 何か解決策とうございましたら、教えてください。 -----------JavaScript関数----------- <script language="javascript"> function goNext() { if (confirm("確認")) { return true; } else { return false; } } </script> -----------html----------- <table id="tablea"> <tr><td class="b"><img src="img.jpg"/></td></tr> <tr><td> </td></tr> <tr><td class="b"><form action="5_4modify1_pla.html" onsubmit="return goNext();"><input name="bb" type="image" src="img.jpg" width="150" height="30"/></form></td></tr> <tr><td class="b"><form action="5_4modify1_pla.html" onsubmit="return goNext();"><input name="bb" type="image" src="img.jpg" width="150" height="30"/></form></td></tr> <tr><td class="b"><img src="img.jpg"/></td></tr> </table> -----------CSS----------- .b {height: 30px;} #tablea { width: 180px; height: 200px;} ----------------------
- ベストアンサー
- HTML
- テーブルの行の高さを指定する時全てのtdタグに？
スタイルシートでテーブルの行の高さを指定する時は、 全てのtdタグにスタイルシートを指定するべきか、 １つだけ（一番左だけ）指定すればいいのかわからないので押してください。 全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。 コードを書く上でどちらが適切か教えてください。 -------------------------------------------------- <style type="text/css"> td.test {height: 50px;} </style> <body> １の例<br>（2列ともclass="test"を入れた）<br> <table border=1> <tr><td class="test">1</td><td class="test">2</td></tr> <tr><td class="test">3</td><td class="test">4</td></tr> </table> <br><br> ２の例<br>（一番左の列だけclass="test"をいれた）<br> <table border=1> <tr><td class="test">1</td><td>2</td></tr> <tr><td class="test">3</td><td>4</td></tr> </table> <br><br> ３の例<br>（スタイルシートは何も指定していない）<br> <table border=1> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table>
- ベストアンサー
- HTML
- <table>のclass指定が継承されない
<table>に指定したclass指定が、その下の<td>や<tr>に継承されずに困っています。 HTMLを <table class="sample"> <tr> <td>1-1</td> <td>1-2</td> </tr> <tr> <td>2-1</td> <td>2-2</td> </tr> </table> とし、 cssを table, td { border: 2px #2b2b2b solid; } とした場合、新しくhtmlとcssを作ると表自体と全セルに囲み線が作られます。 ですが、今運営しているHPに記述すると、<table>のborderのみしか表示されません。 試しに、<td>にclassを指定しなおしてみると、そのセルにも囲み線が表示されました。 全<td>にclassを指定すれば問題ないのかもしれませんが、それではあまりにも使い勝手が悪いため、何とかhtmlは<table>のみにclassを指定することで全セルに反映させたいと思っています。 考えられる原因としてはどのようなものがありますでしょうか…？
- ベストアンサー
- CSS
- <tr>タグ、<td>タグ
テーブルでレイアウトを行い、htmlで背景色・cssで文字のスタイルを適用する場合、<tr>タグと<td>タグのどちらに記述するのがよいのでしょうか。IEだと大差は無いようなのですが、firefoxやNetscapeで違いが出てくるように感じます（特にfirefox）。 (1)cssで文字スタイルの場合、<table>タグに<table class="text">といった感じで問題ないでしょうか（table内の文字すべてclassがtextの場合）。それともやはり<td>タグひとつひとつにクラス指定した方が良いのでしょうか。 (2)テーブルに背景色を指定する場合、<tr>タグ・<td>タグのどちらに指定するのが良いのでしょうか。
- ベストアンサー
- HTML
- JavaScriptでアコーディオンメニューを作る
こちらでよくお世話になっています。 JavaScriptに詳しい方、どうか教えてください。 当方、まだまだJavaScriptは初心者です。 以下のようなHTMLがあって、 コンテンツ部分を普段は非表示で タイトル部分をクリックしたら、 その下の表示・非表示が切り替わるようにしたいと考えています。 （アコーディオンの感じです。） ------------------------- <div id="title1">タイトル1</div> <table id="contents1"> <tr><td>コンテンツ1</td></tr> </table> <div id="title2">タイトル2</div> <table id="contents2"> <tr><td>コンテンツ2</td></tr> </table> <div id="title3">タイトル3</div> <table id="contents3"> <tr><td>コンテンツ3</td></tr> </table> ちなみに、それぞれタイトルとコンテンツがセットになっていて、 titleのid名の末尾の番号と そこをクリックしたら、開閉するtableのid名の末尾の番号を一致させています。 ※このタイトルとコンテンツは動的に増えたり減ったりします。 プラグインを入れないで 自分でjavascriptを組みたいと考えているのですが どのようにすればよいのか、分からず こちらで質問をさせていただきました。 var divList = document.getElementsByTagName('div'); for(i=0; i<divList.length; i++){ } のようにやっていくのだろうとは思うのですが for文の中をどのように書いたらよいかを ご教授いただけたら助かります。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- tableタグについて
tableタグの挙動について教えてください。 下記のタグで、tableの幅は240pxにしたいのですが、 ブラウザ表示（Chrome）では230pxとなりました。 この10pxの隙間はどこで発生しているのでしょうか？ どうぞよろしくお願いします。 ーーーーHTMLーーーーー <body style="width:240px;margin:0 auto;"> <div class="list-box"> <table width="240" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td>テキスト/td> <td>テキスト/td> </tr> </tbody></table> </div> </body> ーーーーCSSーーーーー .list-box{margin:0 auto;} .list-box table{ width:100%;} .list-box table td:first-child{ background:#900;} .list-box table td:last-child{ background:#069;}
- ベストアンサー
- CSS
- tableがbodyにはみ出る。。
文章での質問で恐縮ですが、 html例に記載のような形で、レイアウトを作っています。 ヘッダーとフッター、左右のBOXとベタな構成かと思ってますが、 右ボックス（div right-box）内のテーブルの行が増えた際（運用上、可変で増えます）に、 tableがdiv構成（wrap-1,wrap-2,right-box,footer）からはみ出して、bodyの領域に出てしまいます。 スタイルシートでは左右のボックスをfloat left、float rightしていて、 テーブルの行が可変なので、left-box以外にはheightは指定していないです。 ※left-boxのheight指定は100% heightを指定しなければ、基本的に行追加に合わせて、可変で動くような気がしているのですが、 どうもうまくいかないです。 left-boxにheightを指定しているのは、left-box内に定義している要素があり、 heightの指定がない場合に、その要素の高さになってしまうので、 right-boxと同じ高さになるように、１00%を指定しています。 分かりにくい質問で申し訳ないですが、 right-boxのheightをtableの行追加に合わせて可変にする方法はないでしょうか？ 本来、heightなしで可変になるのであれば、 可変にならない原因の推測をお願いします。 ---ここからhtml例--- <html> <head> </head> <body> <div id="wrap-1"> <div id="header">; </div> <div class="wrap-2"> <div id="left-box"> </div> <div id="right-box"> <table id="table"> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> </table> </div> </div> <div class="footer clear"> </body> </div> </div> </body> </html>
- ベストアンサー
- HTML
- Table内TDの子要素を移動させたいのですが・・
初心者的な質問になるかもしれませんが、宜しくお願いします。 唐突ですが、こんなTable付きのHTMLがあります(ちょっと省略してます)。 <DIV>.....</DIV> ← (*) <Table> <TR> <TD> ← (1) <SCRIPT ........</SCRIPT> <A HREF="">........</A> <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD> ← (2) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD> ← (3) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> </TABLE> (1)は複数の子要素があり、(2)と(3)はLI要素(ただし、その中に複数要素がある)です。 この(1)～(3)のTDの子要素部分だけを抽出し、(*)の DIVタグの真下に移動させるようなjquery文を作りたいのですが、 http://d.hatena.ne.jp/replication/20120113/1326382090 等の記事を参考に、 var cells, tblcell; // テーブルタグを探して、１番目のテーブルを取得する var rows = $("table")[0].rows; // 列を１つずつ取り出す $.each(rows, function(i) { cells = rows[i].cells; // 行を１つずつ取り出す $.each(cells, function() { // tdタグの値を書き換える tblcell = $(this).detach(); console.log(tblcell); // tdタグのスタイルシートを書き換える $('div').after(tblcell); }); }); このやり方だとrowの性質上、DIVの下へTD付きでそのまま来てしまいます。 そうではなく、TD直下のHTMLだけをそのままDIVの直下へつなげるように放り込みたいのですが、 中々うまいやり方がみつかりません・・・ なにか、よい方法はございませんでしょうか？
- ベストアンサー
- JavaScript
- html4.01で使われないことが推奨されているタグ
タグの参考書にHTML4.01に使われないことが推奨されているタグがあり、そのタグはスタイルシートに替えて使用することが書かれていました。 主要なもので、タグではfontタグが、属性ではcoloerの指定、div、p、table、tr、td、h1～h6、imageのalignの指定、imageの borderの指定、trとtdのwidthとheightなどがありましたが、リニューアルされたばかりのページなどを見ても、完全にそれを守っているページはありませんでした。fontタグは使われていなかったのですが、それ以外のタグはそのまま使ってhtml4.01Transtisionとするのは一般的なのでしょうか。推奨を守ってhtml4.01 strictとして制作しているwebデザイン会社などはどのくらいあるのでしょうか。 fontタグはできるとしても、alignやborderなどを使用しないで作成すると、すべてのtdやtrなどにclass指定で指定する方法でしょうか？
- ベストアンサー
- HTML
- <img>タグにCSSのclass設定可能？
<img>タグにスタイルシートのclassは、直接設定できるのでしょうか？ 例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。 <table border="4" width="250"> <tr> <td align="left"> <img src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。 質問1： ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します（ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。）。スタイルシートの指定は、<head></head>内で行なうことにします。 この場合、以下のように<img>タグの中に直接classを設定できますか？できない場合は、その理由、正しいやり方等をお教え下さい。 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <img class="abc" src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> やはり、<div></div>で<img>タグを囲んで、 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <div class="abc"> <img src="example.jpg" width="100" height="100" borde="0"> </div> </td> </tr> </table> などとするしか方法がないのでしょうか？ 質問2： また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
