繁体中文
设为首页
加入收藏
首页
网页制作
脚本专栏
网络编程
数据库
源码下载
软件下载
脚本下载
平面设计
媒体动画
网站技巧
实用技巧
免费资源
主机租用
域名查询
基础知识
应用技巧
表单特效
广告代码
网页特效
黑客性质
页面导航：
首页
→
网络编程
→
JavaScript
→
应用技巧
→ 正文内容 鼠标划过行变色代码
一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
发布：dxy 字体：[
增加
减小
] 类型：转载
经常性的会需要使用表格显示一些东西，当表格比较大的时候一眼望去脑袋可能会有些晕，经常性的因为没看准行而出现误操作，一般解决办法是交替行变行或者鼠标划过行变色
第一个太简单就不说了，第二个也很简单，但每个人都有不同的实现方法，下面给一个比较简洁的做法，支持IE6、IE7、FF2，其他浏览器未测试（可以扩展一下用到ASP.NET的GridView里）：
点击运行可以看到效果:
<!-- 博客园 丁学 --> <!-- 鼠标划过表格行变色－简洁实现－支持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++){ //循环表格行设置鼠标事件：丁学 obj.rows[i].onmouseover=function(){this.style.background="#0EF";} obj.rows[i].onmouseout=function(){this.style.background="";} } </script>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
javascript
鼠标划过行变色
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
javascript charAt() arr[i]数组实例代码
下一篇文章：
asp 取文本框名称代码
·在百度中搜索关于“
一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
相关内容
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
比较详细的javascript对象的property和pr
JavaScript与函数式编程解释
用javascript实现的电信铁通（网通）自动
显示行号的文本输入框
js 对象外部访问或者调用问题
点选TOP后并不是直接跳到页顶的，而是滚动
本窗口将在秒后自动关闭
js的event详解。
去除有数组中重复的元素
下拉菜单既可以选择,又可以自己填写
最 近 更 新
javascript IE中的DOM ready应用技巧
javascript关键字加亮加连接
JavaScript 版本自动生成文章摘要
getElementByID、createElement、appendC
用JavaScript和注册表脚本实现右键收藏We
让任务管理器中的CPU跳舞的js代码
脚本吧 - 幻宇工作室用到js,超强推荐expa
javascript 调用其他页面的js函数或变量的
一个级联菜单(IE ONLY),不过代码很精简!
javascript实现的颜色块滑动的动态效果
热 点 排 行
Div+CSS+JS树型菜单，可刷新
eval(function(p,a,c,k,e,d)系列
在线游戏大家来找茬II
javascript小技巧 超强推荐
动态加载js文件 document.create
JavaScript实现Sleep函数的代码
彻底搞懂JS无缝滚动代码
支持IE和FF的div＋css选项卡
Unicode 编码转换器
js实现的点击超链显示隐藏层
文章评论
共有 位脚本之家网友发表了评论我来说两句