一个简单但常用的表格样式--鼠标划过行变色--简洁实现

经常性的会需要使用表格显示一些东西,当表格比较大的时候一眼望去脑袋可能会有些晕,经常性的因为没看准行而出现误操作,一般解决办法是交替行变行或者鼠标划过行变色,第一个太简单就不说了,第二个也很简单,但每个人都有不同的实现方法,下面给一个比较简洁的做法,支持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>

效果如下:

商品名称 单价 库存数量 货位
丁学最喜欢的仙四豪华版-菱纱版 139 10000000 A12-253
仙四豪华版-梦璃版 139 10000000 A12-254
仙四普通版-首发 69 10000000 A12-255
posted @ 2007-08-09 07:12  丁学  阅读(14586)  评论(20编辑  收藏  举报