jQueryで縞模様

2011.1.9

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

テーブル等、縞模様にしたいhtmlを作った上で、

内に以下のコードを記述します。

(document).ready(function() {   
    //縞模様
    $(table tr:nth-child(odd)).addClass(odd);
});

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)

としておけば汎用的に使えるでしょう。