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

这段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>

您可能感兴趣的文章:

• JS控制表格隔行变色
• 原生JS操作网页给p元素添加onclick事件及表格隔行变色
• javascript实现table表格隔行变色的方法
• javascript表格隔行变色加鼠标移入移出及点击效果的方法
• JavaScript实现的斑马线表格效果【隔行变色】
• 纯css+js写的一个简单的tab标签页带样式
• 最简单纯JavaScript实现Tab标签页切换的方式(推荐)
• js与jquery分别实现tab标签页功能的方法
• js封装tab标签页实例分享
• JavaScript实现的原生态Tab标签页功能【兼容IE6】
• JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】