<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>隔行变色</title>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
#tbStu {
width: 260px;
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 type="text/javascript">
$(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>320</td>
</tr>
<tr>
<td>1002</td>
<td>李明启</td>
<td>女</td>
<td>350</td>
</tr>
</tbody>
</table>
</body>
</html>
这是css 样式的网址: http://www.w3school.com.cn/cssref/selector_nth-child.asp
原文：http://www.cnblogs.com/keno32/p/5211801.html