http://www.okajax.com/a/200807/0F5N152008.html
今天在做表格效果发现以前的表格交替前景和突出显示在IE7和FF最新版中竟然有点问题，关键就在于这个class和className上:
<!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">
table{
border:1px solid #258BDE;
}
td{
font-size:13px;
color:#000000;
border-right:1px solid #B6D7F8;
border-bottom:1px solid #B6D7F8;
padding-left:6px;
padding-top:4px;
padding-bottom:4px;
height:24px;
vertical-align:middle;
}
tr.trbg1{background-color:#FFFFFF}
tr.trbg2{background-color:#E6F0FB}
tr.trbg3{background:#98D8FA}
</style>
<script language="javascript">
function changebg(trid){
var tb = document.getElementById(trid);
tb.setAttribute("class","trbg3 "+tb.getAttribute("class"))
tb.setAttribute("className","trbg3 "+tb.getAttribute("className"));
}
function defaultbg(trid){
var tb = document.getElementById(trid);
tb.setAttribute("class",tb.getAttribute("class").replace("trbg3",""))
tb.setAttribute("className",tb.getAttribute("className").replace("trbg3",""));
}
</script>
</head>
<body>
<table width="557" border="0" cellspacing="0" cellpadding="0" id="tb">
<tr class="trbg2">
<td align="center">1001</td>
<td align="center">Jim</td>
<td align="center">jim@msn.com</td>
<td align="center">jim@msn.com</td>
</tr>
<tr class="trbg1">
<td align="center">1002</td>
<td align="center">John</td>
<td align="center">john@hotmail.com</td>
<td align="center">john@hotmail.com</td>
</tr>
<tr class="trbg2">
<td align="center">1003</td>
<td align="center">Lucy</td>
<td align="center">lucy@163.com</td>
<td align="center">lucy@hotmail.com</td>
</tr>
<tr class="trbg1">
<td align="center">1004</td>
<td align="center">Lily</td>
<td align="center">lily@sina.com.cn</td>
<td align="center">lily@hotmail.com</td>
</tr>
<tr class="trbg2">
<td align="center">1005</td>
<td align="center">Joyce</td>
<td align="center">Joyce@sohu.com</td>
<td align="center">Joyce@hotmail.com</td>
</tr>
<tr class="trbg1">
<td align="center">1006</td>
<td align="center">Tom</td>
<td align="center">tom@21.cn</td>
<td align="center">tom@hotmail.com</td>
</tr>
<tr class="trbg2">
<td align="center">1007</td>
<td align="center">Kite</td>
<td align="center">kite@126.com</td>
<td align="center">kite@msn.com</td>
</tr>
<tr class="trbg1">
<td align="center">1008</td>
<td align="center">Marry</td>
<td align="center">marray@163.com</td>
<td align="center">marray@msn.com</td>
</tr>
<tr class="trbg2">
<td align="center">1009</td>
<td align="center">Sunny</td>
<td align="center">sunny@126.com</td>
<td align="center">sunny@msn.com</td>
</tr>
<tr class="trbg1">
<td align="center">1010</td>
<td align="center">Jogo</td>
<td align="center">jogo@sohu.com</td>
<td align="center">jogo@msn.com</td>
</tr>
<tr class="trbg2">
<td align="center">1011</td>
<td align="center">Parry</td>
<td align="center">parry@yahoo.com.cn</td>
<td align="center">parry@msn.com</td>
</tr>
</table>
<p>加上鼠标移到上面突出显示效果</p>
<table width="557" border="0" cellspacing="0" cellpadding="0" id="tb2">
<tr id="tr1" onmouseover="changebg('tr1')" onmouseout="defaultbg('tr1')" class="trbg2">
<td align="center">1001</td>
<td align="center">Jim</td>
<td align="center">jim@msn.com</td>
<td align="center">jim@msn.com</td>
</tr>
<tr id="tr2" onmouseover="changebg('tr2')" onmouseout="defaultbg('tr2')" class="trbg1">
<td align="center">1002</td>
<td align="center">John</td>
<td align="center">john@hotmail.com</td>
<td align="center">john@hotmail.com</td>
</tr>
<tr id="tr3" onmouseover="changebg('tr3')" onmouseout="defaultbg('tr3')" class="trbg2">
<td align="center">1003</td>
<td align="center">Lucy</td>
<td align="center">lucy@163.com</td>
<td align="center">lucy@hotmail.com</td>
</tr>
<tr id="tr4" onmouseover="changebg('tr4')" onmouseout="defaultbg('tr4')" class="trbg1">
<td align="center">1004</td>
<td align="center">Lily</td>
<td align="center">lily@sina.com.cn</td>
<td align="center">lily@hotmail.com</td>
</tr>
<tr id="tr5" onmouseover="changebg('tr5')" onmouseout="defaultbg('tr5')" class="trbg2">
<td align="center">1005</td>
<td align="center">Joyce</td>
<td align="center">Joyce@sohu.com</td>
<td align="center">Joyce@hotmail.com</td>
</tr>
<tr id="tr6" onmouseover="changebg('tr6')" onmouseout="defaultbg('tr6')" class="trbg1">
<td align="center">1006</td>
<td align="center">Tom</td>
<td align="center">tom@21.cn</td>
<td align="center">tom@hotmail.com</td>
</tr>
<tr id="tr7" onmouseover="changebg('tr7')" onmouseout="defaultbg('tr7')" class="trbg2">
<td align="center">1007</td>
<td align="center">Kite</td>
<td align="center">kite@126.com</td>
<td align="center">kite@msn.com</td>
</tr>
<tr id="tr8" onmouseover="changebg('tr8')" onmouseout="defaultbg('tr8')" class="trbg1">
<td align="center">1008</td>
<td align="center">Marry</td>
<td align="center">marray@163.com</td>
<td align="center">marray@msn.com</td>
</tr>
<tr id="tr9" onmouseover="changebg('tr9')" onmouseout="defaultbg('tr9')" class="trbg2">
<td align="center">1009</td>
<td align="center">Sunny</td>
<td align="center">sunny@126.com</td>
<td align="center">sunny@msn.com</td>
</tr>
<tr id="tr10" onmouseover="changebg('tr10')" onmouseout="defaultbg('tr10')" class="trbg1">
<td align="center">1010</td>
<td align="center">Jogo</td>
<td align="center">jogo@sohu.com</td>
<td align="center">jogo@msn.com</td>
</tr>
<tr id="tr11" onmouseover="changebg('tr11')" onmouseout="defaultbg('tr11')" class="trbg2">
<td align="center">1011</td>
<td align="center">Parry</td>
<td align="center">parry@yahoo.com.cn</td>
<td align="center">parry@msn.com</td>
</tr>
</table>
</body>
</html>
tb.setAttribute("class","trbg3 "+tb.getAttribute("class"))
tb.setAttribute("className","trbg3 "+tb.getAttribute("className"));
在上面两句代码中，一个用到了class, 另一个用到了className，class在FF下有效，className在IE下有效；如果只有其中一句的话，都会不兼容IE或FF，所以我们两句都写上；
注意： 在getAttribute时，我们要与setAttribute一致，在FF下，如果用getAttribute("className")将返回null值，这里之所以用样式叠加，是因为要完成突出效果，以避免鼠标移开时会移除原有样式
