テーブルで1行おきに背景色を変える。

昔（テーブルレイアウトの時代）は、trやtd一つ一つにbackgroundで指定していました。CSSが普及してきてからはidまたはclassで指定したtrやtdにbackground-colorなどで色付けしています。
ただ問題は、各行にclassを付けて1行おきに背景色を変えるテーブルを作成します。そして、そのテーブルに新しい行を追加または削除すると、行の順番が変わるので色付け用のclassをまた付け直さなければなりません。かなり面倒ですよね。これから紹介するのは行を追加・削除しても1行おきに背景色が変わる方法です。メインはJavascriptになっちゃうんですけど、参考にしてみてください。

Javascriptを記述

 
//-------------値設定---------------
 
var classN = "zebra";    //クラス名を指定
var addClass1 = "trcolor1";    //奇数タグのクラス名を指定
var addClass2 = "trcolor2";    //偶数タグのクラス名を指定
 
//---------------------------------
 
function tableZebra() {
    if (!document.getElementsByTagName) return false;
 
    var zebraTables = document.getElementsByTagName("table");
    
    for (var i=0; i < zebraTables.length; i++) {
        if (zebraTables[i].className.match(classN)) {
 
            var zebraRows = zebraTables[i].getElementsByTagName("tr");
            
            for (var k=0; k < zebraRows.length; k++) {
                if (k%2) {
                    zebraRows[k].className = addClass2;
                } else {
                    zebraRows[k].className = addClass1;
                }
            }
        }
    }
}
 
window.onload = tableZebra;
　　

window.onloadを使うと他のJavascriptと衝突する場合があるのでAjaxで使うtry-catch文に変更してもいいかもしれません。

 
window.onload = tableZebra;
 
を、以下のコードに変更
 
try{
	window.addEventListener("load",tableZebra,false);
}catch(e){
	window.attachEvent("onload",tableZebra);
}
　　

CSSを記述

 
.trcolor1 {
    background-color: #FFEEEE;
}
.trcolor2 {
    background-color: #EEFFEE;
}
 

→1行おきに違う背景色をつけるサンプル

表を組む時は必ずと言っていいほど、1行おきに背景色を付けますので、覚えておきたいテクニックです。