▽1
●
cx20 ●68ポイント ベストアンサー |
getElementsByTagName() でなく querySelectorAll() を試してみてください。
function setStyle() { var box = document.querySelectorAll("td:nth-child(3)"); for ( var i = 0; i < box.length; i++ ) { box [i].style.backgroundColor = "#000000"; } }
rows コレクション、cells コレクションを使うと、こんな書き方ができます。
var tbl = document.getElementById("T"); // TABLE // 行のループ for (var r = 0 ; r < tbl.rows.length ; ++r) { // 三列目の背景色を変更 // コレクションは、0始まりなので cells[2] が三列目の cell tbl.rows[r].cells[2].style.backgroundColor = 'white'; }
jsFiddle でサンプルを作ってみました。
http://jsfiddle.net/a_kuma3/U3Pyc/
列に対する背景色の指定であれば、col
要素が使えます。
サンプル:JS Bin - Collaborative JavaScript Debugging
<table> <colgroup> <col id="binary-column"> <col id="octal-column"> <col id="decimal-column"> <col id="hex-column"> </colgroup> <tr><th>2進数</th><th>8進数</th><th>10進数</th><th>16進数</th></tr> <tr><td>0</td><td>0</td><td>0</td><td>0</td></tr> <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr> </table> <script> // colに指定しておいたidから document.getElementById('decimal-column').style.backgroundColor = '#ff0'; // あるいは「3番目のcol」として var table = document.getElementsByTagName('table')[0]; var col = table.getElementsByTagName('col')[2]; // 0, 1, [2] で3番目 col.style.backgroundColor = '#ff0'; </script>
ただし、border
、background
、width
、visibility
以外のスタイルを指定する場合、この方法は使えませんので、他の回答にある方法を使う必要があります(参考:Tables)。