- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
又一款鼠标悬停表格单元格，表格变色的实例效果，运用了CSS和JS两者技术的结合，因些兼容性非常好，而且易于控制，代码修改方便，跟表格读取动态数据没有任何关系，比较方便。
<html> <head> <title>鼠标悬停单元格变色</title> <meta http-equiv="mrc-Type" mrc="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 onload="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].onmouseover=function(){ this.className='over'; } changeTr[i].onmouseout=function(){ this.className=this.temp; } } } //--> </script> </body> </html>