<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style type="text/css">
table{
border:#249bdb 1px solid;
width:500px;
border-collapse:collapse;
}
table td{
border:#249bdb 1px solid;
padding:10px;
}
table th{
border:#249bdb 1px solid;
padding:10px;
background-color: rgb(200,200,200);
}
.one{
background-color:#e1e16a;
}
.two{
background-color:#75f094;
}
.over{
background-color:#f9360d;
}
</style>
<script type="text/javascript">
var name;
function trColor(){
var oTabNode = document.getElementById("info");
// alert(oTabNode);
//表格中所有的行。
var collTrNodes = oTabNode.rows;
//遍历的时候从第二行遍历。
for(var x=1; x<collTrNodes.length; x++){
if(x%2==1){
collTrNodes[x].className = "one";
}else{
collTrNodes[x].className = "two";
}
// 给每一个行对象都添加两个事件。
collTrNodes[x].onmouseover = function(){
name = this.className;
this.className = "over";
}
collTrNodes[x].onmouseout = function(){
this.className = name;
}
}
}
onload = function(){
trColor();
}
</script>
</head>
<body>
<table id="info">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>27</td>
<td>上海</td>
</tr>
<tr>
<td>小强</td>
<td>26</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>29</td>
<td>广州</td>
</tr>
<tr>
<td>孙八</td>
<td>23</td>
<td>南京</td>
</tr>
<tr>
<td>二麻子</td>
<td>19</td>
<td>大连</td>
</tr>
<tr>
<td>犀利姐</td>
<td>32</td>
<td>青岛</td>
</tr>
<tr>
<td>旺财</td>
<td>19</td>
<td>深圳</td>
</tr>
<tr>
<td>周七</td>
<td>42</td>
<td>铁岭</td>
</tr>
</table>
</body>
</html>