[JavaScriptとcssを簡単にするためのjQuery] 2ndDay　ストライプテーブル

$("table.stripe tr:even").addClass("even");

偶数、奇数を設定する擬似クラスっぽいものに:odd, :evenがあります。書き方はcssを編集する感覚でオッケー！！そこにaddClass("even")などを設定することで奇数または偶数の要素にクラスを追加設定できます。

今回のストライプテーブルの設定は以下です。

1. ストライプテーブルにするtableにclass stripeを設定します。
2. $("table.stripe tr:even").addClass("even");
3. 偶数行 trに以下のcssを設定します。

   / *  stripe
   -----------------------------------*/
   table.stripe tr.even td {
   background-color: #f3f3f3;
   }

これで偶数行のみ背景色を変更できます。

trのhover時に背景色を変更

trにマウスオーバーしたときにハイライト表示する設定をします

 $("table.stripe tr").mouseover(function() {$(this).addClass("hover");})
.mouseout(function() {$(this).removeClass("hover");}); 

本来なら、jqueryのhoverメソッドを用いればいいのですが、今回のエッセンスはそうではありません。mouseoverとmouseoutの二つのメソッドを同時に指定できるところにあります（たぶん！）。

実際にはマウスオーバーイベントよりhoverの方がよさげなので、僕は以下のように設定しました。

 $("table.generalTbl tr").hover(function() {
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
} );

メソッドの引数は

hover(hover時の設定,hoverが外れたときの設定)

と、このようになります