js兑现Table隔行变色,支持鼠标经过,标题行处理
日期：2014-05-16 浏览次数：20479 次
js实现Table隔行变色,支持鼠标经过,标题行处理
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){
//IE
document.attachEvent("onreadystatechange",function(){
if(document.readyState=="complete"){
setTableStyle("tbFirst","tdFirstColor","tdSecondColor","tdOverColor",true,"thColor");
}
},false);
}else{
//FF
document.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.className
this.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> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
