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,完成高亮显示。
} 作者最新文章
js-cookie 安装与基础用法:set、get、remove 详解
2026-11-05 16:35:06
适合JavaScript初学者的实战项目:制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式:设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00
JS 生成的统计图怎么导出为 PNG 图片或 PDF 文件?
2026-11-05 09:37:58
