高效的表格行背景隔行变色及选定高亮的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 相关文章推荐
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
img标签中onerror用法
Aug 13 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
js选项卡的实现方法
Feb 09 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
详解Vue调用手机相机和相册以及上传
May 05 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
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
深入PHP数据加密详解
2013/06/18 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
php错误日志简单配置方法
2016/07/11 PHP
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
介绍一下UNIX启动过程
2013/11/14 面试题
行政经理岗位职责
2013/11/09 职场文书
班主任工作年限证明
2014/01/12 职场文书
迎元旦广播稿
2014/02/22 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
交通违章检讨书
2014/09/21 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
react 路由Link配置详解
2021/11/11 Javascript