締切済み

JavaScriptで特定のtdタグにclass名をつけたい

2008/08/08 18:31

指定の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名を付けたいと言った場合です。よろしくお願いいたします。

noname#177060

JavaScript
回答数6
ありがとう数8

みんなの回答 （6）
専門家の回答

みんなの回答

noname#84373

2008/08/09 21:52 回答No.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)

2008/08/09 03:23 回答No.5

あともう一つ動かない原因あった。 gooのシステムが U+005CをU+00A5に置き換えてた気がする。

ログインすると、全ての回答が全文表示されます。

himajin100000
ベストアンサー率54% (1660/3060)

2008/08/09 03:15 回答No.4

<?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>

ログインすると、全ての回答が全文表示されます。

OKbokuzyo
ベストアンサー率43% (130/296)

2008/08/08 21:21 回答No.3

No2です。質問の趣旨を捉え違えていたようです。ごめんなさい。。。１行目だけ取りたいなら以下のような方法でいかがでしょうか？ var divNode = document.getElementById("box"); var trNodeList = divNode.getElementByTagName("TR"); var tdNodeList = trNodeList[0].getElementByTagName("TD");

ログインすると、全ての回答が全文表示されます。

OKbokuzyo
ベストアンサー率43% (130/296)

2008/08/08 21:17 回答No.2

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)

2008/08/08 18:41 回答No.1

答えをそのまま書くのは約束でできないからヒントを・div['box']の中の「td」群を取り出す。・該当する値が入っているなら class という名前の「属性」に値を書き込むこんな流れになるよ。 http://www.tohoho-web.com/js/dom.htm#getElementsByTagName 「javascript dom」辺りで探すと良いよ。

ログインすると、全ての回答が全文表示されます。