<!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>js案例4：表格的隔行换色以及高亮显示
猜你喜欢
转载自www.cnblogs.com/keep-calm/p/9564098.html
今日推荐
周排行