js之表格隔行换色

步骤分析：

第一步：确定事件(onload)并为其绑定一个函数

第二步：书写函数(获取表格)

第三步：获取tbody里面的行数

第四步：对tbody里面的行进行遍历

第五步：获取奇数行和偶数行(角标对2取余)

第六步：分别对奇数行和偶数行设置背景颜色

js代码：

<script type="text/javascript">
//1.获取表格
var tal = document.getElementById("tal");
//2.获取表格中tbody里面的行数(长度)
var len = tal.tBodies[0].rows.length;
//3.对tbody里面的行进行遍历
for(var i = 0;i<len;i++){
if(i%2==0){
tal.tBodies[0].rows[i].style.backgroundColor = "pink";
}else{
tal.tBodies[0].rows[i].style.backgroundColor = "gold";
}
}

}
</script>

html代码：

<table border="1" width="500" height="50" align="center" id="tbl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>

测试结果：