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

最新推荐文章于 2022-08-08 13:36:37 发布

jiedushi

最新推荐文章于 2022-08-08 13:36:37 发布

阅读量952

点赞数

分类专栏：前端开发文章标签： function asp.net 浏览器 ie border 测试

前端开发专栏收录该内容

36 篇文章 0 订阅

订阅专栏

经常性的会需要使用表格显示一些东西，当表格比较大的时候一眼望去脑袋可能会有些晕，经常性的因为没看准行而出现误操作，一般解决办法是交替行变行或者鼠标划过行变色，第一个太简单就不说了，第二个也很简单，但每个人都有不同的实现方法，下面给一个比较简洁的做法，支持IE6、IE7、FF2，其他浏览器未测试（可以扩展一下用到ASP.NET的GridView里）：

<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].οnmοuseοver=function(){this.style.background="#0EF";} obj.rows[i].οnmοuseοut=function(){this.style.background="";} } </script>