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

更新时间：2010年12月04日 12:41:47 作者：

一个项目要用，又不想用jquery之类的东东。先去网上搜索了下，找到了不少在CSS中执行JS的表格行变色方式，不过这类方式在表格行多的时候相当卡，在IE7和firefox3中测试正常。

这段JS放在head中

 
//点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件 
function selectRow(target) 
{ 
var sTable = document.getElementById("ServiceListTable") 
for(var i=1;i&lt;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">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相关内容</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相关内容</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td>相关内容</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
<td align="center">&nbsp;</td> 
</tr> 
</table> 

您可能感兴趣的文章:

JS无缝滚动效果实现方法分析
这篇文章主要介绍了JS无缝滚动效果实现方法,结合实例形式较为详细的分析了无缝滚动的原理、实现技巧与相关注意事项,需要的朋友可以参考下
2016-12-12
图片img的src不变让浏览器重新加载实现方法
图片img的src不变,想让浏览器重新加载怎么办,在图片地址src不变的情况下让浏览器重新加载图片,实际上在src不变时，浏览器直接就去读取缓存
2013-03-03
javascript FormatNumber函数实现方法
如果有一个数字498.8573945,如何把它格式化成两位小数据呢？用过asp的都知道,在vbscript里我们可以调用formatnumber,即用formatnumber(498.8573945,2)就可以输出：498.86。
2008-12-12
浅析$(function) ready和onload 的区别
新手刚学习js和jq的时候难免会接触题目所标识的相关内容，下面小编通过本教程给大家讲解(function) ready和onload 的区别，感兴趣的朋友一起看看吧
2016-09-09
javascript 框架小结个人工作经验
javascript 框架小结个人工作经验,对于新手来说还是值得学习的。
2009-06-06
基于Bootstrap实现城市三级联动
这篇文章主要为大家详细介绍了基于BootStrap实现城市三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
JavaScript实现时钟功能
这篇文章主要为大家详细介绍了JavaScript实现时钟功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
javascript判断是手机还是电脑访问网页的简单实例分享
在智能手机越来越普及甚至是泛滥的时候，确实给大家的生活带来了很大的方便，但是对于web前端设计师来说，可就麻烦多了，现在很多的网站在制作过程中都要考虑到手机访问的问题，那么我们如何来判断客户端是不是手机呢，下面分享个例子吧
2014-06-06
完美实现八种js焦点轮播图（上篇）
这篇文章主要介绍了完美实现八种js焦点轮播图的具体资料，基于完美运动框架move2.js而完成的八种焦点录播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
javascript 弹出层居中效果的制作
做一个带拖动的弹出层效果(像提示框那种) ,看了下代码与实现效果，值得学习应用。
2009-09-09