<style>
tr{text-align: center;}
eve{background-color: greenyellow;}
.old{background-color: crimson;}
</style>
<table border="1px solid red;" cellspacing="" cellpadding="" id="tab" style="width: 500px;height:auto;">
<thead >
<tr style="background: red;">
<th>姓名:</th>
<th>年龄:</th>
<th>性别:</th>
</tr>
<tbody>
<tr>
<td>哈哈</td><td>16</td><td>男</td>
</tr>
<tr>
<td>呵呵</td><td>17</td><td>女</td>
</tr>
<tr>
<td>嘻嘻</td><td>18</td><td>男</td>
</tr>
<tr>
<td>啦啦</td><td>19</td><td>女</td>
</tr>
<tr>
<td>哒哒</td><td>20</td><td>男</td>
</tr>
<tr>
<td>痴痴</td><td>21</td><td>女</td>
</tr>
</tbody>
</thead>
</table>
Js部分:
<script type="text/javascript">
/*通过id获取获取表单元素*/
var tab=document.getElementById("tab");
/*返回集合类型*/
var tabody=tab.getElementsByTagName("tbody")[0];
/*获取【tabody】下的【tr】集合*/
var trs=tabody.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
【第一种方法】:
/*if(i%2){
trs[i].className="eve";
}else{
trs[i].className="old";
}*/
【第二种方法】:
/*三位运算符写法*/
trs[i].className=(i%2==0)?"eve":"old";
</script>
