javascript简单实现表格行间隔显示颜色并高亮显示


Posted in Javascript onNovember 29, 2013
<script type="text/javascript"> 
var name; //存储tr对象的类名,当鼠标移开时进行恢复 
function trcolor(){ //表格行颜色间隔显示 
var tabNode = document.getElementsByTagName("table")[0]; 
var trNodes = tabNode.rows; 
for(var x=1;x<trNodes.length;x++){ 
if(x%2 == 1) 
trNodes[x].className = "one" ; 
else 
trNodes[x].className = "two" ; 
trNodes[x].onmouseover = function(){ //高亮显示 
name = this.className; 
this.className = "over"; 
} 
trNodes[x].onmouseout = function(){ //tr对象添加onmouseout事件属性 
this.className = name ; 
} 
} 
} 
window.onload = trcolor ; 
</script> <style type="text/css"> 
table{ width:60%; border:solid 1px #0066FF;} 
table td {border:solid 1px #0099ff;} 
a{ text-decoration: none;} 
.one{background-color: red;} 
.two{background-color: blue;} 
.over{background-color: yellow;} 
</style> 
</head> 
<body> 
<table> 
<tr> 
<td>姓名</td><td>年龄</td><td>地址</td> 
</tr> 
<tr> 
<td>张三</td><td>23</td><td>北京</td> 
</tr> 
<tr> 
<td>李四</td><td>25</td><td>上海</td> 
</tr> 
<tr> 
<td>王五</td><td>15</td><td>广州</td> 
</tr> 
<tr> 
<td>唐总</td><td>20</td><td>长沙</td> 
</tr> 
</table> 
</body>
Javascript 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
DHTML Slide Show script图片轮换
Mar 03 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
JS实现留言板功能
Jun 17 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
JS小功能(button选择颜色)简单实例
Nov 29 #Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 #Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 #Javascript
Jquery中children与find之间的区别详细解析
Nov 29 #Javascript
JS关键字球状旋转效果的实例代码
Nov 29 #Javascript
JS Loading功能的简单实现
Nov 29 #Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 #Javascript
You might like
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
php中设置多级目录session的问题
2011/08/08 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
Python实现分段线性插值
2018/12/17 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
python中with用法讲解
2020/02/07 Python
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
应聘教师自荐信
2013/10/12 职场文书
幼儿园新学期寄语
2014/01/18 职场文书
工商管理自荐书
2014/07/06 职场文书
领导班子整改措施
2014/10/24 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
新闻通讯稿模板
2015/07/22 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
Python3 类型标注支持操作
2021/06/02 Python