jQueryでストライプの装飾 :nth-child()

<style type="text/css">

table#stripetable {

	border-collapse:collapse;

	background-color:#eeeeee;

}

table#stripetable th {

	color:#fff;

	background-color:#aaa;

	padding:5px;

}

table#stripetable td {

	padding:5px;

}

	table#stripetable .even {

	background-color:#fff;

}

	table#stripetable .hover {

	background-color:#aaaaff;

}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

	$("#stripetable tr:nth-child(even)").addClass("even");

	$("#stripetable tr:not(:first-child)").mouseover(function(){

		$(this).addClass("hover");

	}).mouseout(function(){

		$(this).removeClass("hover");

	});

	$("#stripetable td").mouseover(function(){

		$("#stripetable td:nth-child("+($("#stripetable td").index(this)%$("#stripetable th").size()+1)+")").addClass("hover");

	}).mouseout(function(){

		$("#stripetable td:nth-child("+($("#stripetable td").index(this)%$("#stripetable th").size()+1)+")").removeClass("hover");

	});

})

</script>

<table id="stripetable">

	<tr>

		<th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th>

		<th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th>

	</tr>

	<tr>

		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>

		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>

	</tr>

	<tr>

		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>

		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>

	</tr>

	<tr>

		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>

		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>

	</tr>

	<tr>

		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>

		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>

	</tr>

	<tr>

		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>

		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>

	</tr>

	<tr>

		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>

		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>

	</tr>

	<tr>

		<th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th>

		<th>見出</th><th>見出</th><th>見出</th><th>見出</th><th>見出</th>

	</tr>

</table>