JavaScriptでテーブルの行を交互に色分け[テーブル複数ある場合]

| 2007年09月19日 12:59

昨日のエントリーで書いてあるのはテーブルが複数あった場合、ページ内のtrを一まとめで取得するのでちょっと困ることがある。なんでテーブルが複数あってもテーブルごとにtrを取得するように変更。

また確認して気が付いたのだが背景色指定がFirefoxで利いてなかったのでクラス名を振ってCSSで背景色指定の方がよさそうだ。


window.onload = TrColor;
function TrColor(){
    // ページ内のテーブルを取得
    var table = document.getElementsByTagName("table");
    for(i=0; i<table.length; i++){
        tr = table[i].getElementsByTagName("tr");
        for(j=0; j<tr.length; j++){
            // 偶数の時
            if (j % 2 == 0) {
                tr[j].className = "trColor";
            }
        }
    }
}
<h5>サンプルテーブル</h5>
<table>
<tr>
<th>JavaScript</th>
<td>ジャバスクリプト</td>
</tr>
<tr>
<th>ＰＨＰ</th>
<td>ピーエイチピー</td>
</tr>
<tr>
<th>MySQL</th>
<td>マイエスキューエル</td>
</tr>
<tr>
<th>ＸＭＬ</th>
<td>エックスエムエル</td>
</tr>
<tr>
<th>CSS</th>
<td>シーエスエス</td>
</tr>
</table>

<h5>サンプルテーブル2</h5>
<table>
<tr>
<th>JavaScript</th>
<td>ジャバスクリプト</td>
</tr>
<tr>
<th>ＰＨＰ</th>
<td>ピーエイチピー</td>
</tr>
<tr>
<th>MySQL</th>
<td>マイエスキューエル</td>
</tr>
<tr>
<th>ＸＭＬ</th>
<td>エックスエムエル</td>
</tr>
<tr>
<th>CSS</th>
<td>シーエスエス</td>
</tr>
</table></p>

実行結果

最初なぜかgetElementsByTagName()でtrが取得できなかったので回りくどいのを書いていた。これはこれで何かに使えそうなのでメモ


function TrColor(){
    // ページ内のテーブルを取得
    var table = document.getElementsByTagName("table");    
    for(i=0; i<table.length; i++){
        // テーブルにIDをセット
        table[i].setAttribute("id", "tb" + i);
        // IDでテーブル取得
        tableAtt = document.getElementById("tb" + i);
        // 取得したテーブルのtrを取得
        tr = tableAtt.getElementsByTagName("tr");

        for(j=0; j<tr.length; j++){
            // 偶数の時
            if (j % 2 == 0) {
                tr[j].className = "trColor";
            }
        }    
    }
}
WebクリエイティブのためのDOM Scripting （Web Designing Books）

著者 : 中村享介 / 金額 : ￥ 2,310

kantenna.com 最新更新ページ

JavaScriptでテーブルの行を交互に色分け[テーブル複数ある場合]タグ:

トラックバック

  • http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/379
コメント (0)
コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)





この情報を登録しますか?