jqueryで1行おきにtableの背景色を変える

tableの行を、一行ごとに背景色や文字色を変える。これをjQueryでやるメモ。

まず、JavaScriptだけ版
（偶数行の背景色を#ccc、奇数行の背景色を#666、文字色を#fffに指定）

<script type="text/javascript">
    $(document).ready(function(){
        // 偶数行の色を指定
        $("table#sample1 tr:even").css("backgroundColor","#ccc");
        // 奇数行の色を指定
        $("table#sample1 tr:odd").css("backgroundColor","#666");
        $("table#sample1 tr:odd").css("color","#fff");
    });
</script>

こちらはCSSも併用して、よりシンプルな記述に。
（偶数行だけjqueryのaddClassを使って別のclassを追加している）

<script type="text/javascript">
    $(document).ready(function(){
        $("table#sample2 tr:even").addClass("even_row");
    });
</script>

実行サンプル（CSSの記述はサンプルページ内のソースを参照）
今回も例によって例のごとくjQuery日本語リファレンスさんで勉強させていただきました。ありがとうございました。

Tags: jquery, tips