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 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
javascript使用activex控件的代码
Jan 27 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
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
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
jQuery 解析xml文件
2009/08/09 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
详解Python发送邮件实例
2016/01/10 Python
Python正则简单实例分析
2017/03/21 Python
速记Python布尔值
2017/11/09 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python SVM 线性分类模型的实现
2019/07/19 Python
python轮询机制控制led实例
2020/05/03 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
民事诉讼授权委托书范文
2014/08/02 职场文书
初婚初育证明范本
2015/06/18 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电