【HTML+CSS+JS】前台简单功能之====表格效果（隔行变色）
界面效果如下：
代码如下：
changeColor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格隔行变色</title>
<script type="text/javascript" src="../js/changeColor.js"></script>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tb1">
<thead>
<tr>
<th>地区</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>艾欧尼亚</td>
<td>寒冰</td>
<td>19</td>
</tr>
<tr>
<td>雷瑟守备</td>
<td>盖伦</td>
<td>20</td>
</tr>
<tr>
<td>祖安</td>
<td>石头</td>
<td>12</td>
</tr>
<tr>
<td>血色玫瑰</td>
<td>剑豪</td>
<td>22</td>
</tr>
</tbody>
</table>
</body>
</html>
changeColor.js
window.onload = function(){
//1.获取表格
var tblEle = document.getElementById("tb1");
//2.获取表格中tbody里面的行数(长度)
var len = tblEle.tBodies[0].rows.length;
//alert(len);
//3.对tbody里面的行进行遍历
for(var i=0;i<len;i++){
if(i%2==0){
//4.对偶数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="grey";
}else{
//5.对奇数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="green";
}
}
}