JS案例四：表格的隔行换色以及高亮显示
程序员文章站
2023-09-28 17:35:23
``` 编号姓名年龄 1 张三 12 2 李四 22 3 王五 13 4 马六 14 ... ......
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function() {
var oldcolor;
var tblele = document.getelementbyid("tbl");
var len = tblele.tbodies[0].rows.length;
for(var i = 0;i<len;i++) {
if(i%2==0) {
tblele.tbodies[0].rows[i].style.backgroundcolor = "pink";
//添加鼠标经过事件
tblele.tbodies[0].rows[i].onmouseover = function() {
oldcolor = this.style.backgroundcolor;
this.style.backgroundcolor = "blue";
}
// 添加鼠标离开事件
tblele.tbodies[0].rows[i].onmouseout = function() {
this.style.backgroundcolor = oldcolor;
}
}else{
tblele.tbodies[0].rows[i].style.backgroundcolor = "gold";
//添加鼠标经过事件
tblele.tbodies[0].rows[i].onmouseover = function() {
oldcolor = this.style.backgroundcolor;
this.style.backgroundcolor = "blue";
}
// 添加鼠标离开事件
tblele.tbodies[0].rows[i].onmouseout = function() {
this.style.backgroundcolor = oldcolor;
}
}
}
}
</script>
</head>
<body>
<table id="tbl" border="1" border-collapse="collapse" align="center" cellspacing="0" cellpadding="5" width="400" height="20">
<thead>
<tr>
<th>编号</th><th>姓名</th><th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>12</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
</tr>
<tr>
<td>4</td>
<td>马六</td>
<td>14</td>
</tr>
<tr>
<td>5</td>
<td>伍六七</td>
<td>17</td>
</tr>
<tr>
<td>6</td>
<td>梅花十三</td>
<td>17</td>
</tr>
</tbody>
</table>
</body>
</html>