またまたjQueryネタです。最近多いですね（汗
今回は巷で流行り(？)のストライプテーブルをjQueryを使って実装してみます。

まずはテーブルを作成しclass属性を予め付けておきます。クラス名は”stripe”にします。テーブルは何行でも何列でもかまいません。極端な話1000行とかでも大丈夫です。全てにjQueryで自動的にクラスを付加してしまいます。

<table class="stripe">
<tr>
<th></th>
..以下略

次ぎにいつものおまじない。下記のように書くことでbody内に書くonloadの代わりになるのでした。

$(document).ready(function(){
  //コードをここに記述
}

jQueryで奇数番のtrにクラスを付与する

さて、jQueryでクラス属性をつけるには.addClassを使うのでした。ストライプにしたいので、奇数番のtr要素にクラスをつけるには下記のように:evenを使います。

$(document).ready(function(){
  $(".stripe tr:even").addClass("even");
}

あとはcssでtrの背景色を下記のように指定してやります。

tr.even td {
	background: #F2F0EE;
}

これで完成です。早っ！･･･とまぁ、これだけだと味気ないのでもうひと手間やってみます。テーブルのセルにマウスオーバーしたとき色が反転するようにします。マウスオーバーした時のCSSを下記のように指定します。

tr.over td {
	background: #666666;
	color: #FFFFFF;
}

jQueryのコードにはマウスオーバーしたときのアクションを指定します。

$(document).ready(function(){
	$(".stripe tr").mouseover(function(){
		$(this).addClass("over");
	});
$(".stripe tr:even").addClass("even");
});

これでマウスオーバーした時に色が反転するようになりましたが、カーソルをそらしても戻らなくなってしまいました。色を戻るようにするためにはjQueryのメソッド「removeClass」を使って、付加したクラス属性を削除してあげる必要があります。最終的なスクリプトのコードは下記になります。

$(document).ready(function(){
	$(".stripe tr").mouseover(function(){
		$(this).addClass("over");
	}).mouseout(function(){
		$(this).removeClass("over");
	});
$(".stripe tr:even").addClass("even");
});

いかがでしたでしょうか？クラス属性の付加、削除ができるということはかなり便利だと思います。様々な使い方ができると思うので是非jQueryを使ってみてください。

• ストライプテーブルのデモはこちら

関連エントリー

• 透過pngをIE6で使う方法いろいろとjQueryプラグイン
• 使えそうなjQueryプラグイン
• コーディングコンテストの種明かし
• jQueryを使ってCSS切替機能を実装
• jQueryを使ったアコーディオンメニュー
• jQueryでフォントサイズ切替機能
• jQueryでクロスフェードをやってみる
• IE6で隣接セレクタを使うには
• 画像置換とSEOスパムの境界線
• ブラウザ間の差異をなくすCSSリセット

• Category
  • Ajax
  • jQuery
• 3 件のコメント
• TrackBack URL

このエントリーのトラックバックURL

http://www.lllcolor.com/web/ajax/32.html/trackback