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 去除数组的重复元素
May 04 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
微信小程序中wxs文件的一些妙用分享
Feb 18 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
PHP数据流应用的一个简单实例
2012/09/14 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
extjs render 用法介绍
2013/09/11 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
react-router实现按需加载
2017/05/09 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
Python字符串转换成浮点数函数分享
2015/07/24 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
办公室文秘自我评价
2013/09/21 职场文书
旷课检讨书1000字
2014/02/14 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
标准单位租车协议书
2014/09/23 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
公司规章制度范本
2015/08/03 职场文书
青岛市的收音机研制与生产
2022/04/07 无线电