`
sunlf
  • 浏览: 30448 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类：
  • JS
浏览器 
阅读更多
<!-- 鼠标划过表格行变色－简洁实现－支持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

版权声明：本文原创发表于博客园，作者为丁学
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则视为侵权。
分享到：
| JS 字符串和时间格式转换
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics