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

代码 <! 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

相关资源：74138的工作原理如下图所示