<!-- 博客园 丁学 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].οnmοuseοver=function(){this.style.background="#0EF";}
obj.rows[i].οnmοuseοut=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].οnmοuseοver=function(){this.style.background="#0EF";}
obj.rows[i].οnmοuseοut=function(){this.style.background="";}
}
</script>
效果如下:
商品名称 | 单价 | 库存数量 | 货位 |
---|---|---|---|
丁学最喜欢的仙四豪华版-菱纱版 | 139 | 10000000 | A12-253 |
仙四豪华版-梦璃版 | 139 | 10000000 | A12-254 |
仙四普通版-首发 | 69 | 10000000 | A12-255 |