<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title></title>
<style type=
"text/css"
>
#table {
width: 400px;
border-collapse: collapse;
}
</style>
</head>
<body>
<table id=
"table"
border=
"1"
>
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>黄艺</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>21</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>4</td>
<td>网无</td>
<td>23</td>
</tr>
</tbody>
</table>
</body>
<script type=
"text/javascript"
>
var
table = document.getElementById(
"table"
);
var
oldColor =
""
;
for
(
var
i = 0; i < table.tBodies[0].rows.length; i++) {
if
(i % 2 == 0) {
table.tBodies[0].rows[i].style.backgroundColor =
"gray"
;
}
else
{
table.tBodies[0].rows[i].style.backgroundColor =
"#ccc"
;
}
table.tBodies[0].rows[i].onmouseover =
function
() {
oldColor = this.style.backgroundColor;
this.style.backgroundColor =
"red"
;
}
table.tBodies[0].rows[i].onmouseout =
function
() {
this.style.backgroundColor = oldColor;
}
}
</script>
</html>