Layui表格行选中后CSS样式自定义方法

很多人在使用 Layui 表格时，经常遇到这样一种情况：明明已经配置了 rowClickToCheck: true，但点击表格行的任意位置后，复选框依然没有反应，甚至连行高亮都不显示。实际上，这一问题的逻辑并不复杂，排查也有固定的方法可循。

rowClickToCheck 开启后，选中行没反应？先确认 checkbox 或 radio 列是否存在

该参数仅在表格中配置了 type: 'checkbox' 或 type: 'radio' 列时才真正生效。如果缺少这类列，rowClickToCheck: true 会被静默忽略，相当于从未设置过。

• 务必在 cols 的任意位置（通常放置在首列）显式声明：{type: 'checkbox', fixed: 'left'}
• 注意：checkbox 和 radio 列不能同时存在，否则选择逻辑会冲突，导致点击后毫无响应
• 如果只需要视觉高亮，而不需要真实的选中状态，请不要使用此参数——它的本质是点击后触发复选框勾选，并非单纯的样式开关。这一点常被误解。

用 table.on('row(filter)') 手动控制选中样式，更灵活也更可控

通过监听 row 事件，获取 obj.tr 后可直接操作 DOM。这是目前最稳定、且兼容分页与重载的方案。

• obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click') 是核心逻辑。注意调用时机：每次点击后立即执行，能自然覆盖翻页后的旧样式。
• 不要尝试在 done 回调中遍历 tbody tr 并添加 class——新页加载后旧节点已被销毁，而且虚拟滚动下许多 tr 并不在 DOM 中，此类写法极易出错。
• CSS 选择器必须添加 !important，因为 Layui 默认给 tr 写入了内联 background-color，普通 class 的权重无法覆盖它。

自定义 class 生效但颜色不显示？重点检查三处

常见现象是 class 名确实已添加到 上，但背景色、字体色却没有变化。问题通常出在以下三个方面：

• CSS 选择器未限定作用域：.layui-table-click 这种写法强度不足，建议改为 table .layui-table tbody tr.layui-table-click 或直接加 !important，效果立竿见影。
• 表格启用了 skin: 'line' 或 'nob' 等皮肤，这些皮肤会重置 tr 的 background 和 border，建议先设置为 skin: 'default' 观察是否恢复正常。
• 某列设置了 cellStyle 并返回了 background-color，它会覆盖整行的 rowStyle 或 class 背景——单元格级别的样式优先级始终高于行级，这一点容易疏忽。