こんにちは！会社の玄関で密かにアボカドを育てているデザイナーのゆぅです！

今回のテーマは「シマシマテーブル」！
jQueryとCSSを使ってシマシマのテーブルを作る方法をご紹介いたします。シマシマのテーブルとは、

こんなやつです。
テーブルの行ごとに色を変えてシマシマにして見やすくします。

シマシマテーブル

jQuery

まずはjQueryを準備します。jhttp://jquery.com/からダウンロードしてください。もう持ってる人は必要ないです。
jQueryを読み込んで下記のスクリプトを書き込みます。

JavaScript

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

これでテーブルの行に奇数偶数のクラスをつけます。

CSS

tr.even th,
tr.even td {
    background:#EFEFEF;
}
tr.odd th,
tr.odd td {
    background:#A59C98;
}

CSSで奇数行偶数行用のクラスに背景色を設定して完成です。
簡単ですね～。
。。。簡単すぎたのでもう一個。

オンマウスしたときに色が変わるテーブル

オンマウスしている行の色が変わるテーブルです。
この間、急遽作ったのでメモ代わりにまとめます。

$(document).ready(function () {
    $('.onmouse_tbl tr')
		.mouseover(function() {
			$(this).css('background-color','#ffd0b1');
		})
		.mouseout(function() {
			$(this).css('background-color','#fff');
		});
});

背景色を直接指定してます。これだと色を変えたいときにjsに書き込むことになるので「なんかやだな～」と思って修正したのが下記。

$(document).ready(function () {
    $('.onmouse_tbl2 tr')
		.mouseover(function() {
			$(this).addClass("on");
		})
		.mouseout(function() {
			$(this).removeClass("on");
		});
});

クラスを追加してcssで色指定できます。こっちのほうが使いやすいかも？

デモ用に作ったものなので小さいテーブルでしか試してませんが、どちらのjsも大きなテーブル（特に横に広いとか）のときに力を発揮すると思います。

参考URL

jQuery でテーブルのセルをストライプ ( しましま ) にするサンプル