高效的表格行背景隔行变色及选定高亮的JS代码


Posted in Javascript onDecember 04, 2010

这段JS放在head中

//点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 
function selectRow(target) 
{ 
var sTable = document.getElementById("ServiceListTable") 
for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行 
{ 
if (sTable.rows[i] != target) //判断是否当前选定行 
{ 
sTable.rows[i].bgColor = "#ffffff"; //设置背景色 
sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件 
sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件 
} 
else 
{ 
sTable.rows[i].bgColor = "#d3d3d3"; 
sTable.rows[i].onmouseover = ""; //去除鼠标事件 
sTable.rows[i].onmouseout = ""; //去除鼠标事件 
} 
} 
} 
//移过时tr的背景色 
function rowOver(target) 
{ 
target.bgColor='#e4e4e4'; 
} 
//移出时tr的背景色 
function rowOut(target) 
{ 
target.bgColor='#ffffff'; 
} 
//恢复tr的的onmouseover事件配套调用函数 
function resumeRowOver() 
{ 
rowOver(this); 
} 
//恢复tr的的onmouseout事件配套调用函数 
function resumeRowOut() 
{ 
rowOut(this); 
}

关于最后两个函数resumeRowOver和resumeRowOut为什么这样写参考我之前写的通过js给页面元素添加事件

对应的表格HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="ServiceListTable"> 
<tr> 
<th>服务事项</th> 
<th>N</th> 
<th>状态</th> 
<th>办结</th> 
<th>资料</th> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
</table>
Javascript 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
jquery 上下滚动广告
Jun 17 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
javascript innerHTML使用分析
Dec 03 #Javascript
统计出现最多的字符次数的js代码
Dec 03 #Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 #Javascript
基于jQuery的左右滚动实现代码
Dec 03 #Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 #Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 #Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 #Javascript
You might like
PHP中require和include路径问题详解
2014/12/25 PHP
十大使用PHP框架的理由
2015/09/26 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
tensorflow识别自己手写数字
2018/03/14 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
JAVA程序员面试题
2012/10/03 面试题
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
大三在校生电子商务求职信
2013/10/29 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
小学生教师节广播稿
2015/08/19 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书