应使用table.on('row(表名)', callback)监听行点击，配合外部变量缓存选中id，并在done回调中恢复高亮；rowstyle仅用于静态渲染样式，不可用于动态高亮切换。
layui table 的 rowStyle 和 onRow 怎么配合实现点击行高亮？
layui 的 table 组件本身不提供「单选行 + 持久高亮」的内置功能，得靠手动绑定事件 + 控制 CSS 类。核心是：用 onRow 拿到点击的行 DOM 和数据，再用 rowStyle（或更稳妥的 class 切换）控制样式，同时清理上一次选中状态。
注意：rowStyle 是渲染时生效的函数，适合初始样式；动态切换必须靠 DOM 操作 + class 控制，否则点击后样式不会实时更新。
-
onRow回调里拿到的是tr元素和data，可直接对tr添加/移除 class - 别在
rowStyle里写条件判断“当前行是否为选中行”，它不响应运行时变化 - 如果表格启用了
page: true，翻页后原选中状态会丢失，需自行缓存data.id并在done回调中重新标记
怎么给选中行加自定义背景色而不影响 hover 效果？
layui 默认的 .layui-table-hover 和选中态冲突，直接加 background-color 会覆盖 hover。推荐用更高优先级的 class + !important，并在 CSS 中明确覆盖 hover 规则：
.layui-table tbody tr.selected > td {
background-color: #e6f7ff !important;
}
.layui-table tbody tr.selected:hover > td {
background-color: #d0f0ff !important;
}
关键点：
- 选择器必须比 layui 原生规则更具体（比如加上
tbody和> td） - hover 状态也要单独定义，否则鼠标移入时会退回到默认 hover 色
- 避免用
!important过度，只在必要时用于覆盖框架默认样式
如何获取并保持当前选中的那行数据？
点击行时，onRow 回调能拿到完整数据对象，但需要自己存起来。别依赖 tr 的 index —— 分页、排序后 index 会变，唯一可靠的是数据本身的唯一标识字段（如 id）：
let currentSelectedId = null;
table.render({
elem: '#demo',
url: '/api/list',
onRow: function(obj){
// 移除之前选中的行
if (currentSelectedId !== null) {
const prevTr = $(`tr[data-id="${currentSelectedId}"]`);
prevTr.removeClass('selected');
}
// 标记当前行
obj.tr.addClass('selected');
currentSelectedId = obj.data.id;
// 此时 obj.data 就是你要的完整数据
}
});
注意事项：
-
obj.tr是 jQuery 对象，可直接操作；若未引入 jQuery，需用原生obj.tr[0]获取 DOM - 服务端返回的数据必须包含稳定唯一字段（如
id），不能用lay-id（那是 layui 内部生成的，不可靠） - 如果允许取消选中（点击已选行），需在
onRow里加判断：if (obj.tr.hasClass('selected')) { ... }
分页或重载表格后，选中状态丢失怎么办？
layui 表格重绘时会清空所有手工添加的 class。要在 done 回调里根据缓存的 currentSelectedId 重新标记：
done: function(res, curr, count){
// 重绘完成后，尝试恢复选中状态
if (currentSelectedId !== null) {
const targetTr = $(`tr[data-id="${currentSelectedId}"]`);
if (targetTr.length) {
targetTr.addClass('selected');
}
}
}
这个逻辑必须放在 done 里，不能放 render 外部 —— 因为表格 DOM 还没生成完，查不到 tr。
真正麻烦的是搜索或排序后，currentSelectedId 对应的数据可能不在当前页。这时要么禁用跨页记忆，要么配合服务端做「精准定位」（例如请求时带上 highlightId 参数，让后端把该条数据顶到第一页）。
