jQueryで縞模様

jQuery
スポンサーリンク

jQueryを使い、テーブルやリストで縞模様にするためのコードです。

テーブル等、縞模様にしたいhtmlを作った上で、内に以下のコードを記述します。

“`

“`

trにoddというクラスが自動付与されるので、CSSを設定します。例えばこんな感じ。

“`table tr.odd td {
background-color: #eee;
}“`

tr:oddとtr:nth-child(odd)の違い

tr:nth-child(odd)としているのは、ページ内に複数のテーブル表組があった場合、テーブル表ごとに縞模様にしてくれるからです。つまり、

$(“table tr:odd”).addClass(“odd”);
ページ内のすべてのtrタグの総数を見てクラスを付与
$(“table tr:nth-child(odd)”).addClass(“odd”);
テーブル組単位でクラスを付与

となります。まぁ、特に理由がなければtr:nth-child(odd)またはtr:nth-child(even)としておけば汎用的に使えるでしょう。