简单实现表格隔行变色+鼠标经过变色

代码

<! 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 >
< script language ="javascript" >
function show(){
var tab = document.getElementById( " tab " );
var tr = tab.getElementsByTagName( " tr " );
for ( var i = 0 ;i <= tr.length;i ++ ){
if (i % 2 == 0 ){
tr[i].style.backgroundColor = " #ccc " ;
tr[i].onmouseover = function (){ this .style.background = " red " };
tr[i].onmouseout = function (){ this .style.background = " #ccc " }
} else {
tr[i].style.backgroundColor = " #fff " ;
tr[i].onmouseover = function (){ this .style.background = " red " };
tr[i].onmouseout = function (){ this .style.background = " #fff " }
}
}
}
window.onload = show;
</ script >
</ head >
< body >
< table id ="tab" width ="50%" >
< tr >< td > dfdsf </ td >< td > dfdsf </ td ></ tr >
< tr >< td > dfdsf </ td >< td > dfdsf </ td ></ tr >
< tr >< td > dfdsf </ td >< td > dfdsf </ td ></ tr >
< tr >< td > dfdsf </ td >< td > dfdsf </ td ></ tr >
< tr >< td > dfdsf </ td >< td > dfdsf </ td ></ tr >
</ table >

</ body >
</ htmll >

 

运行演示效果：http://www.websjy.com/bbs/viewthread.php?tid=5771

转载于:https://www.cnblogs.com/websjy/archive/2010/08/25/1808364.html