JQuery问题:使用jquery选择器实现隔行变色,为什么一点效果都没有,哪里写错了吗?真的看不出来!!!
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!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> 展开
"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> 展开
1个回答
展开全部
样式部门改成这样:
<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 {background-color: #ccc;color: #fff}
#tbStu tr.trOdd{background-color: #fff}
</style>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询