- 又一款鼠标悬停表格单元格，表格变色的实例效果，运用了CSS和JS两者技术的结合，因些兼容性非常好，而且易于控制，代码修改方便，跟表格读取动态数据没有任何关系，比较方便。
<html>
<head><title>鼠标悬停单元格变色</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"><style type="text/css"><!--#myTable{ width:100%;border-collapse:collapse;margin:1em 0;}#myTable th,td{ text-align:left;padding:.5em;border:1px solid #fff;}th{ background-color:#328aa4;color:#fff;}td{background:#e5f1f4;}tr.even td{background:#e5f1f4;}tr.odd td{background:#f8fbfc;}tr.over td{background:#bce774;}tr.out td{}--></style></head><body οnlοad="changeTableBg();"><table width="500" id="myTable" cellspacing="0" cellpadding="0"> <tr> <th>title</th> <th>title</th> <th>title</th> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table><script type="text/javascript"><!--function changeTableBg(){ var changeTr=document.getElementById("myTable").getElementsByTagName("tr"); for(i=0;i<changeTr.length;i++) { changeTr[i].className=(i%2>0)?"even":"odd"; changeTr[i].temp=changeTr[i].className; changeTr[i].οnmοuseοver=function(){ this.className='over'; } changeTr[i].οnmοuseοut=function(){ this.className=this.temp; } }}//--></script></body></html>