經常性的會需要使用表格顯示一些東西,當表格比較大的時候一眼望去腦袋可能會有些暈,經常性的因為沒看準行而出現誤操作,一般解決辦法是交替行變行或者滑鼠划過行變色,第一個太簡單就不說了,第二個也很簡單,但每個人都有不同的實現方法,下面給一個比較簡潔的做法,支援IE6、IE7、FF2,其他瀏覽器未測試(可以擴充一下用到ASP.NET的GridView裡):
<!-- 部落格園 丁學 http://www.cnblogs.com/dingxue 2007.8.9 -->
<!-- 滑鼠划過表格行變色-簡潔實現-支援IE6、IE7、FF2,其他瀏覽器未測試 -->
<html>
<head>
<title>滑鼠划過表格行變色-簡潔實現</title>
<style type="text/css">
#tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;}
#tb th{background:#EEE;border-bottom:1px solid #CCC;padding:4px;}
#tb td{border:1px solid #EEE;padding:4px;}
</style>
</head>
<body>
<table id="tb">
<tr>
<th>商品名稱</th>
<th>單價</th>
<th>庫存數量</th>
<th>貨位</th>
</tr>
<tr>
<td>丁學最喜歡的仙四豪華版-菱紗版</td>
<td>139</td>
<td>10000000</td>
<td>A12-253</td>
</tr>
<tr>
<td>仙四豪華版-夢璃版</td>
<td>139</td>
<td>10000000</td>
<td>A12-254</td>
</tr>
<tr>
<td>仙四普通版-首發</td>
<td>69</td>
<td>10000000</td>
<td>A12-255</td>
</tr>
</table>
<script type="text/javascript">
var obj=document.getElementById("tb");
for(var i=0;i<obj.rows.length;i++){ //迴圈表格行設定滑鼠事件:丁學 http://www.cnblogs.com/dingxue
obj.rows[i].onmouseover=function(){this.style.background="#0EF";}
obj.rows[i].onmouseout=function(){this.style.background="";}
}
</script>