注意两个部分中间使用了一个全局变量bgc来记录表格高亮之前的颜色, 当鼠标移开后再变为原来的颜色.
<!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>
td{
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<table border="1" style="border-collapse: collapse;">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
var trs = document.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
if(i%2 == 0){
trs[i].style.backgroundColor="pink";
}
else {
trs[i].style.backgroundColor="gray";
}
//更改高亮之前的颜色
var bgc;
//鼠标移上高亮显示
trs[i].onmouseover = function(){
bgc = this.style.backgroundColor;
this.style.backgroundColor="skyblue";
}
trs[i].onmouseout = function(){
this.style.backgroundColor=bgc;
}
}
</script>
</body>
</html>