其实原理很简单,取到表格ID,获取表格内的<tbody>元素,然后在获取<tbody>元素下的所有<tr>元素。然后循环输出获取的<tr>元素。
对<tr>元素的索引值除2取余,为0者设置背景色。
HTML代码:
<table id="tb"> <tbody> <tr> <td> 第一行 </td> <td> 第一行 </td> </tr> <tr> <td> 第二行 </td> <td> 第二行 </td> </tr> <tr> <td> 第三行 </td> <td> 第三行 </td> </tr> <tr> <td> 第四行 </td> <td> 第四行 </td> </tr> <tr> <td> 第五行 </td> <td> 第五行 </td> </tr> <tr> <td> 第六行 </td> <td> 第六行 </td> </tr> </tbody> </table>
Javascript代码:
var item = document.getElementById("tb"); //获取ID为tb的元素(table) var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody元素 var trs = tbody.getElementsByTagName("tr"); //获取tbody元素下的所有的tr元素 for (var i = 0; i < trs.length; i++) { //循环tr元素 if (i % 2 == 0) { //取余 trs[i].style.backgroundColor = "#888"; //改变符合条件tr元素的背景色 } }