<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitionala.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jquery选择器实现隔行变色</title>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
body{font-size: 12px;text-align: center}
#tbStu{width: 250px;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>
<th>1001</th><th>张小明</th><th>男</th><th>320</th>
</tr>
<!-- 偶数 -->
<tr>
<th>1002</th><th>韩梅梅</th><th>女</th><th>650</th>
</tr>
</tbody>
</table>
</body>
</html>
样式部门改成这样：
<style type="text/css">