JS实现表格行背景隔行变色与选中高亮功能

JavaScript实现表格交互效果

将以下JavaScript代码放置在HTML文档的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; // 重新绑定鼠标悬停事件处理函数
sTable.rows[i].onmouseout = resumeRowOut;// 重新绑定鼠标移出事件处理函数
} 
else
{ 
sTable.rows[i].bgColor = "#d3d3d3";
sTable.rows[i].onmouseover = ""; // 清除选中行的鼠标悬停事件
sTable.rows[i].onmouseout = ""; // 清除选中行的鼠标移出事件
} 
} 
} 
// 鼠标悬停时表格行的背景色处理函数
function rowOver(target)
{ 
target.bgColor='#e4e4e4';
} 
// 鼠标移出时表格行的背景色处理函数
function rowOut(target)
{ 
target.bgColor='#ffffff';
} 
// 用于恢复表格行鼠标悬停事件的配套调用函数
function resumeRowOver()
{ 
rowOver(this);
} 
// 用于恢复表格行鼠标移出事件的配套调用函数
function resumeRowOut()
{ 
rowOut(this);
} 

关于最后两个函数resumeRowOver和resumeRowOut为何这样编写，可参考我之前撰写的文章《通过js给页面元素添加事件》。

对应的HTML表格结构如下：

 
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>