人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptの質問です
javascriptで
テーブルの左から3列めを加工したいのですがその場合
どのように指定すればいいでしょうか?
function setStyle() {
var box = document.getElementsByTagName('td:nth-child(6)');
box[0].style.backgroundColor = "#000000"}
試しにこれでやってみましたがダメでした

●質問者: takanii
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

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";
 }
}

2 ● a-kuma3
●66ポイント

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/


3 ● rikuba
●66ポイント

列に対する背景色の指定であれば、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>

ただし、borderbackgroundwidthvisibility以外のスタイルを指定する場合、この方法は使えませんので、他の回答にある方法を使う必要があります(参考:Tables)。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ