一个简单但常用的表格样式－－鼠标划过行变色－－简洁实现
经常性的会需要使用表格显示一些东西，当表格比较大的时候一眼望去脑袋可能会有些晕，经常性的因为没看准行而出现误操作，一般解决办法是交替行变行或者鼠标划过行变色，第一个太简单就不说了，第二个也很简单，但每个人都有不同的实现方法，下面给一个比较简洁的做法，支持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>
<!-- 鼠标划过表格行变色－简洁实现－支持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 |
分类:
WEB技术
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！