<!DOCTYPE html>
<html>
<head>
< charset=\"UTF-8\">
< ></ >
< >
window. = 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]. = function() {
oldColor = this.style.backgroundColor;
this.style.backgroundColor = \"blue\";
}
// 添加鼠标离开事件
tblEle.tBodies[0].rows[i]. = function() {
this.style.backgroundColor = oldColor;
}
}else{
tblEle.tBodies[0].rows[i].style.backgroundColor = \"gold\";
//添加鼠标经过事件
tblEle.tBodies[0].rows[i]. = function() {
oldColor = this.style.backgroundColor;
this.style.backgroundColor = \"blue\";
}
// 添加鼠标离开事件
tblEle.tBodies[0].rows[i]. = function() {
this.style.backgroundColor = oldColor;
}
}
}
}
</ >
</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> 继续阅读与本文标签相同的文章
-
Python快递鸟API接口对接（即时查询|物流跟踪|电子面单|单号识别）
2026-05-18栏目： 教程
-
免费物流快递单号查询API接口及使用教程
2026-05-18栏目： 教程
-
【译】Hadoop发生了什么？我们该如何做？
2026-05-18栏目： 教程
-
阿里云上云企业案例周刊·第2期
2026-05-18栏目： 教程
-
虚拟机模拟部署Extended Clusters（一）基础环境准备
2026-05-18栏目： 教程