<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr {
height: 30px;
background-color: aquamarine;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg {
background-color: pink;
}
</style>
</head>
<body>
<!-- 表格隔行变色 -->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<script>
// 1获取元素:获取的是tbody里面的所有行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2注册事件,处理程序:鼠标经过,表格变成红色。鼠标离开,鼠标变成绿色
for (var i = 0; i < trs.length; i++) {
// 3. 鼠标经过事件 onmouseover
trs[i].onmouseover = function () {
this.className = 'bg';
}
// 3. 鼠标经过事件 onmouseover
trs[i].onmouseout = function () {
this.className = '';
}
}
</script>
</body>
</html>
注意:经过第几个,第几个变色