思路：
1.因爲要操作行的樣式，所以要先獲取表格對象。
2.獲取所有被操作的行對象。
3.遍歷行並給每一行指定樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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">
function trColor() {
var name;
var oTabNode = document.getElementById("info");
//表格中所有的行
var collTrNode = oTabNode.rows;
//從第二行開始遍歷
for (var i = 1; i < collTrNode.length; i++) {
if (i%2 == 1) {
collTrNode[i].className = "one";
} else {
collTrNode[i].className = "two";
}
//給每一個行對象都添加兩個事件
collTrNode[i].onmouseover = function() {//當鼠標放在某一行時的事件
name = this.className;
this.className = "over";
}
collTrNode[i].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>22</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
<td>廣州</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>上海</td>
</tr>
<tr>
<td>趙六</td>
<td>19</td>
<td>成都</td>
</tr>
<tr>
<td>周七</td>
<td>24</td>
<td>深圳</td>
</tr>
<tr>
<td>孫八</td>
<td>26</td>
<td>成都</td>
</tr>
</table>
</body>
</html>
在瀏覽器中的默認效果：
當把鼠標放在某一行（例如：李四這一行），這一行高亮：
