JavaScript实现Table选中行高亮效果

实现原理

要实现单行高亮效果，关键在于维护一个“状态”。我们需要一个全局变量来保存当前被选中的行（即 currentActiveRow）。当用户点击另一行时：

1. 清除旧状态：如果存在当前激活的行，将其背景色恢复为空白或默认值。
2. 更新状态：将点击的这一行赋值给全局变量，并赋予其特定的背景色。

这样能避免多行同时被高亮的情况，符合大多数列表选择的操作直觉。

具体操作步骤

第一步：编写核心JavaScript函数

目的：定义一个通用的处理函数，用于切换行的样式。

请在HTML页面的 <script> 标签内添加以下代码：

<script type="text/javascript">
// 定义全局变量，用于暂存当前被选中的行对象
var currentActiveRow = null;

/**
 * 改变选中行的颜色
 * @param {HTMLElement} obj - 当前被点击的行元素 (this)
 */
function changeActiveRow(obj) {
    // 1. 检查是否存在之前选中的行
    if (currentActiveRow) {
        // 将旧行的背景色清空，恢复默认
        currentActiveRow.style.backgroundColor = "";
    }
    
    // 2. 更新全局指针，指向当前点击的行
    currentActiveRow = obj;
    
    // 3. 设置当前行的背景色为高亮色（此处为浅灰色）
    currentActiveRow.style.backgroundColor = "#F2F2F2";
}
</script>

第二步：在Table结构中绑定事件

目的：将上述函数与HTML元素关联。

在你的 <table> 标签中，找到需要响应的 <tr>（表格行）或 <td>（单元格），在 onmouseover（鼠标悬停预览）或 onclick（正式选中）属性中调用该函数。示例如下：

<table border="1"
   style="width:100%"
   id="myTable"
   onmouseout="style.backgroundColor=''"
   onmouseover="style.backgroundColor='#f1f1f1'"
>
  <tr onclick="changeActiveRow(this);">
    <td>数据1</td>
    <td>数据2</td>
  </tr>
  <tr onclick="changeActiveRow(this);">
    <td>数据3</td>
    <td>数据4</td>
  </tr>
</table>

注意：this 关键字在此处代表被触发的DOM元素本身。如果是作用在 <td> 上且希望整行变色，可能需要获取父级行 obj.parentElement，或者直接在 <tr> 上绑定事件。

注意事项与排错

• 样式覆盖问题：如果使用CSS类名来控制样式而非直接操作 style 属性，建议优先使用 element.classList.toggle('active-class') 方式，这样更容易通过CSS统一管理主题色。
• 初始化状态：上述代码在页面加载初期不会有任何行高亮。如果需要默认选中某一行，可在函数外部手动调用一次 changeActiveRow(document.getElementById("rowId"));。
• 兼容性：该方案基于标准的W3C DOM模型，适用于所有现代浏览器（IE9及以上）。

总结

通过简单的全局变量引用和DOM属性修改，我们实现了表格的单行高亮功能。这种方法逻辑清晰、性能开销极小，非常适合用于后台管理系统的数据列表交互。

以上就是JavaScript使用onclick事件改变选中行的颜色的详细内容，更多关于JavaScript DOM操作优化技巧的资料请关注本站其它相关文章！