效果图
实现代码：
通过css控制样式，利用jquery的addClass方法实现
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 实现表格隔行变色 </title>
<meta http-equiv="Content-Type" content="text/html; chartset=GBK" />
<script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
#tbStu{width:90%;border:solid 1px #666;background-color:#eee}
#tbStu tr{line-height:23px}
#tbStu tr th{background-color:#ccc;color:#fff}
#tbStu .trOdd{background-color:#fff}
</style> <script>
$(function(){
$("#tbStu tr:nth-child(even)").addClass("trOdd");}
) </script> </head>
<body> <table id="tbStu" cellpadding="0" cellspacing="0"> <tbody> <tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>总分</th>
</tr> <tr>
<td>1001</td>
<td>张晓明</td>
<td>男</td>
<td>98</td>
</tr> <tr>
<td>1002</td>
<td>李小强</td>
<td>男</td>
<td>88</td>
</tr> <tr>
<td>1003</td>
<td>张小花</td>
<td>女</td>
<td>88</td>
</tr> <tr>
<td>1004</td>
<td>李小妞</td>
<td>女</td>
<td>88</td>
</tr> <tr>
<td>1001</td>
<td>张晓明</td>
<td>男</td>
<td>98</td>
</tr> <tr>
<td>1002</td>
<td>李小强</td>
<td>男</td>
<td>88</td>
</tr> <tr>
<td>1003</td>
<td>张小花</td>
<td>女</td>
<td>88</td>
</tr> <tr>
<td>1004</td>
<td>李小妞</td>
<td>女</td>
<td>88</td>
</tr> <tr>
<td>1001</td>
<td>张晓明</td>
<td>男</td>
<td>98</td>
</tr> <tr>
<td>1002</td>
<td>李小强</td>
<td>男</td>
<td>88</td>
</tr> <tr>
<td>1003</td>
<td>张小花</td>
<td>女</td>
<td>88</td>
</tr> <tr>
<td>1004</td>
<td>李小妞</td>
<td>女</td>
<td>88</td>
</tr> <tr>
<td>1001</td>
<td>张晓明</td>
<td>男</td>
<td>98</td>
</tr> <tr>
<td>1002</td>
<td>李小强</td>
<td>男</td>
<td>88</td>
</tr> <tr>
<td>1003</td>
<td>张小花</td>
<td>女</td>
<td>88</td>
</tr> <tr>
<td>1004</td>
<td>李小妞</td>
<td>女</td>
<td>88</td>
</tr> </tbody> </table> </body>
</html>