JavaScriptでテーブルの行を交互に色分け

| 2007年09月18日 12:07

HTMLにclass振って対応している場合、行の削除、挿入が頻繁にあると対応がとても面倒なのでJavaScriptを活用するとよい。

ググッてみたらたくさん出てきたので今さら感はありますがメモってことで。

サンプル


<script language="javascript" type="text/javascript">
window.onload = TrColor;
function TrColor(){
    var tr = document.getElementsByTagName("tr");
    for(i=0; i<tr.length; i++){
        if (i % 2 == 0) {
            tr[i].style.backgroundColor = "E8E8E8";
        }
    }
}
</script>

<table id="javaSample">
<tfoot>
<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>
</tfoot>
</table>

実行結果

JavaScript ジャバスクリプト
ＰＨＰ ピーエイチピー
MySQL マイエスキューエル
ＸＭＬ エックスエムエル
CSS シーエスエス

ページにテーブルが1つの場合はうまくいくが複数ある場合ずれてしまう。 trの取得の仕方をちょっと工夫する必要があるようだ。

改訂第4版 JavaScript ポケットリファレンス

著者 : 古籏 一浩 / 金額 : ￥ 2,499

kantenna.com 最新更新ページ

JavaScriptでテーブルの行を交互に色分けタグ:

トラックバック

  • http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/378
[WEBプログラム覚書]2009年01月09日 13:18
JavaScriptでテーブルの行を交互に色分け[テーブル複数ある場合]
JavaScriptでtableが複数あっても大丈夫なテーブルの行を交互に色分け
コメント (0)
コメントを投稿

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





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