javascriptの質問です

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/09/10 04:06:47
  • 終了:2013/09/14 06:00:47

ベストアンサー

id:cx20 No.1

cx20回答回数606ベストアンサー獲得回数1072013/09/10 07:33:41

ポイント68pt

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件)

id:cx20 No.1

cx20回答回数606ベストアンサー獲得回数1072013/09/10 07:33:41ここでベストアンサー

ポイント68pt

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";
    }
}
id:a-kuma3 No.2

a-kuma3回答回数4524ベストアンサー獲得回数18802013/09/10 09:07:03

ポイント66pt

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/

id:rikuba No.3

rikuba回答回数26ベストアンサー獲得回数122013/09/12 20:47:09

ポイント66pt

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません