本文介绍如何使用原生JavaScript实现HTML表格的交互效果，包括鼠标悬停时的背景色变化、点击行时的选中高亮以及非选中行的样式还原。代码通过遍历表格行并动态修改bgColor及onmouseover、onmouseout事件属性，实现简洁高效的表格交互体验。
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代码如下：
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>