JavaScript实现鼠标划过表格行变色的简洁方案
作者:页面旅途时间:2026-10-22 21:03:01浏览:642
本文介绍一种简洁的JavaScript实现方式,用于在鼠标划过表格行时改变背景颜色。该方法兼容IE6、IE7及Firefox 2浏览器,并可扩展应用于ASP.NET GridView控件。
JavaScript实现鼠标划过表格行变色的简洁方案
第一种方法过于简单,此处不再赘述。第二种方法虽然原理简单,但实现方式因人而异。下面提供一种较为简洁的实现方案,该方案支持IE6、IE7以及Firefox 2浏览器,其他浏览器尚未进行测试(该方案可扩展应用于ASP.NET的GridView控件中):
HTML结构与CSS样式定义
<!-- 博客园 丁学 --> <!-- 鼠标划过表格行变色-简洁实现-支持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> 代码运行与操作说明
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
作者最新文章
JS监听滚动事件:回到顶部按钮的显示与隐藏逻辑
2026-11-05 16:19:37
JavaScript怎么读写LocalStorage与SessionStorage
2026-11-05 15:40:11
anime.js 与 GSAP 对比:轻量级项目该怎么选择动画库
2026-11-05 11:24:55
flv.js 与 hls.js 在直播场景下的选型对比
2026-11-05 08:18:52
JavaScript能做什么?前端开发中的作用与应用场景解析
2026-11-04 23:17:54
