<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>隔行變色，並且鼠標放上去也變色</title>
<style>
.top{
background-color:#3F0;
color:#FF0;}
table{
border:1px #000 dashed;
border-collapse:collapse;}
td,th{
border:#F00 1px solid;}
.one{
background-color:#0CF;}
.two{
background-color:#C06;}
.over{
background-color:#FF9;}
</style>
</head>
<script language="javascript" type="text/javascript">
function geHang(){
//獲取所有的tr
var trlist=document.getElementsByTagName("tr");
for(var i=1;i<trlist.length;i++){
if(i%2==0){
trlist[i].className="two";
}else{
trlist[i].className="one";
}
//進行遍歷，並且判斷
}
}
//當鼠標移動到這後改變當前行的顏色
var color="";
function over(trNode){
color=trNode.className;
//將當前行顏色設定爲over
trNode.className="over";
}
//當鼠標移開的時候，我們原來行的顏色色丁回來
function out(trNode){
//還原以前的顏色
trNode.className=color;
}
</script>
<body οnlοad="geHang()">
<table width="500" border="0">
<tr class="top">
<th>年齡</th>
<th>電話</th>
<th>遊戲</th>
<th>姓名</th>
<th>性別</th>
<th>住址</th>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)">
<td>2</td>
<td>222222222</td>
<td>信息</td>
<td>二</td>
<td>女</td>
<td>保定</td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)">
<td> </td>
<td> </td>
<td>hdfds</td>
<td>dfds</td>
<td>多發點</td>
<td>上大富</td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>訂購單</td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>