鼠标划过表格行变色－简洁实现

鼠标划过表格行变色－简洁实现

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


<html>
<head>
<title>鼠标划过表格行变色－简洁实现</title>
<style type="text/css">
#tb{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>

查看全文

相关阅读:
java线程的理解
 linux常用命令
 排序算法-(2)-选择排序
 git查看某个文件修改历史
 Information:java: javacTask: 源发行版 1.8 需要目标发行版 1.8
排序算法-(1)-插入排序
 去重脚本
 771.宝石与石头
 json 的应用
 xml 文件处理

原文地址：https://www.cnblogs.com/lixinsheng/p/1218068.html