<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>使用javascript实现隔行变色</title>
</head>
<style>
body{
font-size:12px;
text-align:center;
}
#tbStu{
width:260px;
border:1px solid #666;
background-color:#EEE;
}
#tbStu tr{
line-height:23px;
}
#tbStu tr th{
background-color:#EC3E3E;
color:#FFF;
}
#tbStu .trOdd{
background-color:#FFF;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
Javascript原生实现隔行变色
<script type="text/javascript">
window.onload = function() {
var _TB = document.getElementById("tbStu");
for (var i = 0; i < _TB.rows.length - 1; i++) {
if (i % 2) {
_TB.rows[i].className = "trOdd";
}
}
}
</script>-->
<script>
$(function(){
$("#tbStu tr:nth-child(even)").addClass('trOdd')
})
</script>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>总分</th>
</tr>
<tr>
<th>A001</th>
<th>一根火柴</th>
<th>男</th>
<th>0</th>
</tr>
<tr>
<th>A002</th>
<th>两根木头</th>
<th>男</th>
<th>55</th>
</tr>
<tr>
<th>A003</th>
<th>三朵小花</th>
<th>女</th>
<th>80</th>
</tr>
<tr>
<th>A004</th>
<th>四颗豆芽</th>
<th>女</th>
<th>40</th>
</tr>
<tr>
<th>A005</th>
<th>无尽悲伤</th>
<th>男</th>
<th>1</th>
</tr>
</tbody>
</table>
</body>
</html>
请各位友友们支招,谢谢!
这年头隔行换色也要用 JS 了么...都用nth-child(even)选择器了为什么不直接用 tr:nth-of-type(even) CSS选择器设置样式呢...http://jsfiddle.net/7vy6j9nc/
<script type="text/javascript">
window.onload = function() {
var doc = document,
tab = doc.getElementById("tbStu"),
tr = tab.getElementByTagName('tr');
for (var i = 0,lng = tr.length;i < lng; i++) {
if (i % 2) {
tr[i].className = "trOdd";
}
}
}
</script>
你的css有问题，设置到tr就行了，不用到th，不然你的行背景被列单元格背景覆盖了，也就没生效了：
html<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>使用javascript实现隔行变色</title> </head> <style> body{ font-size:12px; text-align:center; } #tbStu{ width:260px; border:1px solid #666; background-color:#EEE; } #tbStu tr{ line-height:23px; } #tbStu tr{ background-color:#EC3E3E; color:#FFF; } #tbStu .trOdd{ background-color:#FFF; color:#000; } </style> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Javascript原生实现隔行变色 <script type="text/javascript"> window.onload = function() { var _TB = document.getElementById("tbStu"); for (var i = 0; i < _TB.rows.length - 1; i++) { if (i % 2) { _TB.rows[i].className = "trOdd"; } } } </script>--> <script> $(function(){ $("#tbStu tr:nth-child(even)").addClass('trOdd') }) </script> <body> <table id="tbStu" cellpadding="0" cellspacing="0"> <tbody> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>总分</th> </tr> <tr> <th>A001</th> <th>一根火柴</th> <th>男</th> <th>0</th> </tr> <tr> <th>A002</th> <th>两根木头</th> <th>男</th> <th>55</th> </tr> <tr> <th>A003</th> <th>三朵小花</th> <th>女</th> <th>80</th> </tr> <tr> <th>A004</th> <th>四颗豆芽</th> <th>女</th> <th>40</th> </tr> <tr> <th>A005</th> <th>无尽悲伤</th> <th>男</th> <th>1</th> </tr> </tbody> </table> </body> </html>