DOM案例之-----------隔行变色、鼠标移动变色
<!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=utf-8" />
<title>隔行变色</title>
<style>
.top{
background-color:#FF9900;
color: #00F}
table{
border:1px #F0F dashed;
border-collapse:collapse;
}
td,th{
border:#999 1px solid;}
.one{
background-color:#FFC;
}
.two{
background-color:#FCC}
.over{
background-color:#C90;}
</style>
<script>
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 oldcolor;
//实现当鼠标移动到该行，改行背景加深
trlist[i].onmouseover=function (){
oldcolor=this.className;
//重新设定新的颜色
this.className="over";
}
trlist[i].onmouseout=function (){
//当鼠标离开，自动还原改行的颜色
this.className=oldcolor;
}
}
}
//当鼠标移动上来的时候，改变当前行的颜色
var color="";
function over(trNode){
//把原来的颜色，先另存一下
color=trNode.className;
//将当前行的颜色设定为over
trNode.className="over";
}
//当鼠标移动离开的时候，我们原来的行的颜色设定回来
function out(trNode){
//还原以前的颜色
trNode.className=color;
}
</script>
</head>
<body onload="geHang()">
<table width="500" height="200" border="0">
<tr class="top">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>电话</th>
<th>邮箱</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
摘自 刘海闯的专栏
