<!DOCTYPE html>
<html>
<head>
<title>表格分行高亮显示</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css" target="_blank" rel="external nofollow" >-->
<style type="text/css">
table{
border-collapse:collapse;
border:solid 1px #0000CC;
width:500px;
background-color:#009966;
}
table td,table th{
border:solid 1px #333399;
text-align:center;
padding-top:5px;
padding-bottom:5px;
}
/*奇数行的样式*/
.one{
background-color:#0066FF;
}
/*偶数行的样式*/
.two{
background-color:#00FFCC;
}
/*鼠标移入时的样式*/
#over{
background-color:#CC3300;
height:40px;
z-index:1;
}
</style>
<script type="text/javascript">
//在浏览器完成数据的加载时就触发
window.onload = function(){
//获取所有的tr节点
var trNodes = document.getElementsByTagName("tr");
//纪录之前的值
var preId;
for(var x = 1; x <trNodes.length; x++){
if(x % 2 == 1){
trNodes[x].className = "one";
}else{
trNodes[x].className = "two";
}
//鼠标移入时的样式
trNodes[x].οnmοuseοver=function(){
preId = this.id;
this.id = "over";
}
//鼠标移除时的样式
trNodes[x].οnmοuseοut=function(){
this.id = preId;
}
}
}
</script>
</head>
<body>
<table align="center">
<tr>
<th>姓名</th><th>年龄</th><th>所在地</th>
</tr>
<tr>
<td>张三</td><td>21</td><td>北京</td>
</tr>
<tr>
<td>李四</td><td>20</td><td>成都</td>
</tr>
<tr>
<td>王五</td><td>25</td><td>长沙</td>
</tr>
<tr>
<td>赵六</td><td>30</td><td>福州</td>
</tr>
<tr>
<td>田七</td><td>26</td><td>上海</td>
</tr>
<tr>
<td>孙八</td><td>22</td><td>广州</td>
</tr>
</table>
</body>
</html>