必须用 table.on('row(表名)', callback) 监听行事件,因其绑定在表格生命周期内,能自动适配重载、分页、排序等 DOM 重建场景;而 click 事件或手动操作 class 在 reload 后失效,且需手动管理高亮状态与固定列同步。
直接用 table.on('row(表名)', callback) 监听,别绑 click 事件,也别手动操作 tr 的 class 属性——否则重载、分页、排序后高亮就乱套了。
为什么必须用 row 事件而不是 click?
Layui 表格的 row 事件是内置工具事件,绑定在表格生命周期内,能自动处理 DOM 重建、分页跳转、排序重绘等场景;而直接监听 click 或给 tr 加 onclick,会在 table.reload() 后失效,因为新生成的 tr 没有事件监听器。
-
row回调里拿到的tr是当前有效 DOM 元素,data是对应数据对象,二者严格对齐 - 表名(即
id参数)不能省略,否则事件注册失败,控制台无报错但不触发 - 别在回调里用
document.querySelector去查行——tr已经给你了,直接用就行
高亮样式怎么加才不被覆盖?
Layui 内部用 layui-table-hover 类控制 hover 和选中态,复用它最稳;自己定义 .active 类容易被 skin: 'line' 或 'nob' 的透明背景干扰,必须加 !important 才生效。
- 每次点击前先清空所有
layui-table-hover:$('.layui-table tbody tr').removeClass('layui-table-hover') - 再给当前
tr加:$(tr).addClass('layui-table-hover') - 如果用了
skin: 'line',CSS 必须写成:.layui-table tbody tr.layui-table-hover td { background-color: #f0f8ff !important; }
重载后高亮状态怎么保留?
table.reload() 会重建整个 tbody,之前加的所有类全丢。Layui 不保存“当前高亮行”状态,得你自己存、自己恢复。
- 定义全局变量:
let activeRowIndex = null - 点击时设值:
activeRowIndex = $(tr).index()(注意是当前页tbody内索引) - 重载时传
done回调:table.reload('test', { done: function() { applyHighlight(activeRowIndex); } }) -
applyHighlight(index)里用$('.layui-table-main tbody tr').eq(index).addClass('layui-table-hover'),别漏掉固定列(.layui-table-fixed-l和.layui-table-fixed-r)
固定列是独立 DOM 结构,主表加了 layui-table-hover 它不会自动同步;行高不同步也会导致高亮色被截断——这些不是高亮逻辑错了,而是 DOM 分离和样式隔离带来的必然问题,得手动对齐。事情说清了就结束。


















