JavaScript 实现表格选中行样式切换

作者:像素猫时间:2026-10-24 22:32:23浏览:161

本文介绍如何使用JavaScript动态切换HTML表格中选中行的CSS样式。通过遍历表格行并重置其他行的类名,同时为当前选中行应用指定的高亮类,实现清晰的用户交互反馈。代码包含完整的函数定义与逻辑说明。

以上即为完整的代码实现,可直接复制使用。

JavaScript 表格选中行样式切换实现

具体实现代码如下所示:

该函数用于处理选中行的样式设置。
定义函数 SetSelectTrClass,接收三个参数:seltr(当前选中的行元素)、selclass(选中状态的CSS类名)和 unselclass(未选中状态的CSS类名)。
首先获取当前选中行所在的表格对象,通过 seltr.parentElement 属性获取。
注意循环从索引 1 开始,这是为了跳过表格的表头行,保持表头样式不变。
使用 for 循环遍历表格的所有行,索引 i 从 1 开始,直到表格总行数 thetable.rows.length。
在循环内部,获取当前遍历到的行元素 tr。
将当前行的 className 属性设置为未选中状态的类名 unselclass,以清除之前可能存在的选中样式。
} 
最后,将传入的选中行 seltr 的 className 设置为选中式样的类名 selclass,完成高亮显示。
} 
作者最新文章