hijiriworld Web

ストライプテーブルとは、1行（列）おきに色づけしたテーブルのこと。
偶数行（列）と奇数行（列）に、それぞれ別の背景色を設定することで、テーブルが見やすくなります。

テーブルのHTMLは以下とします。

<table>
	<tr>
		<th>no</th>
		<th>Name</th>
		<th>Birthday</th>
	</tr>
	<tr>
		<td>1</td>
		<td>ジョナサン・ジョースター</td>
		<td>1868-04-04</td>
	</tr>
	<tr>
		<td>2</td>
		<td>ジョセフ・ジョースター</td>
		<td>1920-09-27</td>
	</tr>
	<tr>
		<td>3</td>
		<td>ジョルノ・ジョバーナ</td>
		<td>1985-04-16</td>
	</tr>
	<tr>
		<td>4</td>
		<td>ロバート・E・O・スピードワゴン</td>
		<td>1863-10-16</td>
	</tr>
	<tr>
		<td>5</td>
		<td>ウィル・A・ツェペリ</td>
		<td>1838-01-19</td>
	</tr>
</table>

CSS3で実装（IE非対応）

CSS2.1で作成しようとすると手間がかかりますが、CSS3なら簡単です。
CSS3セレクターは、:nth-child(even) で偶数の要素に、:nth-child(odd) で奇数の要素に対してスタイルを適用します。サンプルでは、tr:nth-child(even) で、偶数のtr要素に背景色を設定しています。

tr:nth-child(even) {
	background:#F2F2F2;
}

簡単ですね！
これで、めでたし、めでたし(^^)
と、言いたいところですが、なんと、IEだけがCSS3のほとんどの機能に対応していないのです。。
いまだ最大のシェアを握るIEだけがッ！！

→HTML5 & CSS3 対応表
→日本のバージョン別ブラウザシェア

IEって…とことんク○ですね。。
そこで！jQueryの登場です。jQueryはCSS3セレクターの多くをサポートしており、IE8はもちろん、IE7、IE6にも対応していますので、結果的にIEでもCSS3セレクターを使えるようになります。ステキですね！

jQueryで実装

th, td {
	padding: 5px;
}
th {
	background: #D3DCE3;
}
.even {
	background: #F2F2F2;
}

$(function() {
	$("tr:nth-child(even)").addClass("even");
});

addClass() を使って、偶数行のtr要素に、Class属性を追加しています。
これなら、テーブルの行や列がいくら増えても、ストライプテーブルを維持できます。

マウスオーバーでハイライト表示

$(function() {
	$("tr:nth-child(even)").addClass("even");
	$("tr:not(:first-child)").mouseover(function() {
		$(this).addClass("hover");
	}).mouseout(function() {
		$(this).removeClass("hover");
	})
});

CSSに以下を追加

.hover {
	background: #D0E8FF;
}

tr:not(:first-child) で、1行目（見出し）以外のtr要素を指定して、mouseover() で「hover」というClass属性を追加、mouseout() でClass属性を取り除きます。

列もストライプ＆ハイライト（おまけ）

$(function() {
	$("th:nth-child(odd)").addClass("odd");
	$("tr:nth-child(even)").addClass("even");
	$("tr:not(:first-child)").mouseover(function() {
		$(this).addClass("hover");
	}).mouseout(function() {
		$(this).removeClass("hover");
	})
	$("td").mouseover(function() {
		$("td:nth-child("+($("td").index(this)%$("th").size()+1)+")").addClass("hover");
	}).mouseout(function() {
		$("td:nth-child("+($("td").index(this)%$("th").size()+1)+")").removeClass("hover");
	});
});

th, td {
	padding: 5px;
}
th {
	background: #D3DCE3;
}
.odd {
	background: #B1C0CD;
}
.even {
	background: #F2F2F2;
}
.hover {
	background: #D0E8FF;
}

で、こうなります。