tableのセルに交互に色をつける方法

テーブル（表）を使うとき、見やすいよう交互に色を付ける事が多いかと思います。その際、HTML側に交互にclassをつけていく方法ではとても大変です。
また、更新が入った時はまたclassをつけなおさないといけなくなります。

この方法を知る前は、一つ一つclassをつけなおして大変でした・・・

以下にjavascript（jQuery）とCSSを使って自動的に交互に色を付ける方法をメモしておきます。

javascript（jQuery）で実装

javascript（jQuery）で実装する場合、まずtrの奇数番目にclass（odd）をつけます。ちなみに偶数番目につけたい場合はevenを使います。

$(document).ready(function(){
$("table").each(function(){
$(this).find("tr:odd").addClass("odd");
});
});

これで見た目上はテーブルの偶数番目にclass=”odd”がつきます。（JavaScriptは0,1,2と数えているため）

あとは、class=”odd”にCSSで指定をします。

table tr.odd td {
background-color: #FFCC99;
}

上記はJavaScriptを使いましたが、CSSだけで実装もできます。ただしCSS3なので対応ブラウザに注意してください。

tr:nth-child(even) {
background-color: #FFCC99;
}

JavaScriptと違うのは、CSSは1,2,3と数えてるので同じ指定をすると色がつく行が異なってしまいます。