js实现Table隔行变色,支持鼠标经过,标题行处理

rongyandong · 发表于 2013-2-8 00:23:31

js实现Table隔行变色,支持鼠标经过,标题行处理,兼容IE和FF
<!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 type="text/css">.tdFirstColor {background-color: #C00;}.tdSecondColor {background-color: #33F;}.tdOverColor {background-color: #F90;}.thColor{background-color:#666;}</style><script language="javascript" type="text/javascript">if(document.all){//IEdocument.attachEvent("onreadystatechange",function(){if(document.readyState=="complete"){setTableStyle("tbFirst","tdFirstColor","tdSecondColor","tdOverColor",true,"thColor");}},false);}else{//FFdocument.addEventListener("DOMContentLoaded",function(){setTableStyle("tbFirst","tdFirstColor","tdSecondColor","tdOverColor",true,"thColor");},false);}function setTableStyle(tableId,firstClass,secondClass,overClass,isOver,headClass){var tb=document.getElementById(tableId);for(i=0;i<tb.rows.length;i++){tb.rows[i].className=headClass;if(i%2==0){if(tb.rows[i].cells[0].tagName=="TD")tb.rows[i].className=firstClass;}else{if(tb.rows[i].cells[0].tagName=="TD")tb.rows[i].className=secondClass;}if(isOver && tb.rows[i].cells[0].tagName=="TD"){var orgClassName;if(document.all){tb.rows[i].onmouseover=(function(){return function(){orgClassName=this.className;this.className=overClass;}})();tb.rows[i].onmouseout=(function(){return function(){this.className=orgClassName};})();}else{tb.rows[i].addEventListener("mouseover",function(){orgClassName=this.classNamethis.className=overClass;},false);tb.rows[i].addEventListener("mouseout",function(){this.className=orgClassName;},false);}}}};</script></head><body><table id="tbFirst" width="760" border="1" cellpadding="5" cellspacing="0"> <tr> <th>&nbsp;</th> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <th>&nbsp;</th> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr></table></body></html>

		自动登录	找回密码
密码			立即注册

js实现Table隔行变色,支持鼠标经过,标题行处理

浏览过的版块