隔行变色太简单了，就是用的CSS3 :nth-child() 选择器，但是实际用时总是忘了怎么写的，也总是记不清哪个是奇数，哪个是偶数啊。这里贴出用法，便于以后查看。
选择奇数：:nth-child(odd)
选择偶数：:nth-child(even)
但是IE8是不支持的，所以用jquery控制：
选择奇数：$(" tr:nth-child(odd)")
选择偶数：$(" tr:nth-child(even)")
写了一个demo，朴素效果截图：
html：
<div class="con">
<h1>隔行变色</h1>
<h2>分别设置奇数行和偶数行</h2>
<table class="table_1">
<tr>
<td>第1行</td><td>第1行</td><td>第1行</td>
</tr>
<tr>
<td>第2行</td><td>第2行</td><td>第2行</td>
</tr>
<tr>
<td>第1行</td><td>第1行</td><td>第1行</td>
</tr>
<tr>
<td>第2行</td><td>第2行</td><td>第2行</td>
</tr>
</table>
<br><br>
<h2>实际往往是写一个默认的背景，然后只设置奇数行或偶数行其中的一个</h2>
<table class="table_2">
<tr>
<td>第1行</td><td>第1行</td><td>第1行</td>
</tr>
<tr>
<td>第2行</td><td>第2行</td><td>第2行</td>
</tr>
<tr>
<td>第1行</td><td>第1行</td><td>第1行</td>
</tr>
<tr>
<td>第2行</td><td>第2行</td><td>第2行</td>
</tr>
</table>
<br><br>
<h2>用jquery还能实现隔n行变色</h2>
<table class="table_3">
<tr>
<td>第1行</td>
</tr>
<tr>
<td>第2行</td>
</tr>
<tr>
<td>第3行</td>
</tr>
<tr>
<td>第4行</td>
</tr>
<tr>
<td>第5行</td>
</tr>
<tr>
<td>第6行</td>
</tr>
<tr>
<td>第7行</td>
</tr>
<tr>
<td>第8行</td>
</tr>
<tr>
<td>第9行</td>
</tr>
</table>
<br><br><br>
</div>
css：
.con{ width:1000px; margin:0 auto;}
.con h1{ text-align:center; font-weight:normal;}
h1,h2{ font-weight:normal; color:#0CC;}
ul{ margin:0; padding:0; list-style:none;}
table{ border-collapse:collapse; border-spacing:0; width:100%;}
td{ border:1px solid #ccc; text-align:center; height:30px;}
.table_1 tr:nth-child(odd) td{ background:#f9c;}/*奇数行：粉色*/
.table_1 tr:nth-child(even) td{ background:#ffc;}/*偶数行：黄色*/
.table_2 td,.table_3 td{ background:#c5e9f8;}/*正常：蓝色*/
.table_2 tr:nth-child(even) td{ background:#ffc;}/*偶数行：黄色*
js：
$(document).ready(function(){
//IE8不支持nth-child选择器，故用js写
$(".table_1 tr:nth-child(odd) td").css("background","#f9c");
$(".table_1 tr:nth-child(even) td").css("background","#ffc");
$(".table_2 tr:nth-child(even) td").css("background","#ffc");
//隔n行变色
$(".table_3 tr:nth-child(3n) td").css("background","#ffc");
});
效果预览：
源码下载：