ajax+js+dom实现隔行变色效果

Interlaces.css

.top{

background-color:#F00;

color:#006;

}

table{

border:1px #C06 dashed;

border-collapse:collapse;

}

th,td{

border:#999 1px solid;

}

.one{

background-color:#ffc;

}

.two{

background-color:#fcc;

}

.over{

background-color:#666;

}

Interlaces.js

function Interlaces(){

//获取id=Interlaces_tab表格的所有的行

var interlaces_tab=document.getElementById("Interlaces_tab");

//获取所有的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;

//onmouseover会传匿名函数 this--将鼠标移上去会获取当前值

//重新设置新颜色

this.className="over";

}

trlist[i].onmouseout=function(){

//当鼠标离开，自动还原颜色

this.className=oldcolor;

}

}

}