隔行变色
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8">
<script>
function changeColor(){
//1、获取 table 元素
var table = document.getElementById("data");
//2、获取 tbody 元素
var tbody = table.getElementsByTagName("tbody")[0];
//3、获取所有 tbody 中的 tr
var trs = tbody.getElementsByTagName("tr");
//4、根据 tr 的奇偶性设置隔行变色
for(var i=0;i<trs.length;i++){
//判断奇偶
if(i % 2 == 0){
trs[i].className="blue";
}
}
}
//绑定页面初始化时执行的操作
//window.onload = changeColor;
</script>
<style>
.blue{
background-color:#CCCCFF;
}
</style>
</head>
<body>
<button onclick="changeColor()">隔行变色</button>
<table id="data">
<thead>
<tr>
<th>姓名</th>
<th>工资</th>
<th>入职时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>35000</td>
<td>2019-1-1</td>
<td>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>Tom</td>
<td>35000</td>
<td>2019-1-1</td>
<td>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>Tom</td>
<td>3500</td>
<td>2019-1-1</td>
<td>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>Tom</td>
<td>3500</td>
<td>2019-1-1</td>
<td>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>Tom</td>
<td>3500</td>
<td>2019-1-1</td>
<td>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>Tom</td>
<td>3500</td>
<td>2019-1-1</td>
<td>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>Tom</td>
<td>3500</td>
<td>2019-1-1</td>
<td>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>Tom</td>
<td>3500</td>
<td>2019-1-1</td>
<td>
<a href="#">删除</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
