正确方式是使用 layui 的 on('row(table)') 或 on('checkbox(table)') 事件监听,而非直接绑定 click 事件;获取所有选中行需调用 table.checkstatus('id') 并取其 data 字段。

layui table 获取选中行数据的正确方式
不能直接用 click 事件去绑表格行(tr)来取数据,因为 layui 表格是虚拟滚动 + 动态渲染的,DOM 上的 tr 不一定对应真实数据,且复选框选中状态和数据映射由 layui 内部管理。
必须用 on('row(table)') 或 on('checkbox(table)') 监听事件
layui 的表格事件系统是唯一可靠的数据获取入口。直接操作 DOM 或遍历 table.checkStatus() 返回值前,得先确认触发时机和参数来源:
-
on('row(table)'):点击任意行触发,回调参数obj.data就是该行完整数据对象 -
on('checkbox(table)'):勾选/取消勾选复选框时触发,obj.data是当前被操作行的数据 - 若需获取「所有已勾选行」,必须调用
table.checkStatus('yourTableId'),它返回含data: []的对象
table.checkStatus() 返回值结构容易误解
这个方法不返回布尔值或简单数组,而是返回一个对象,常见误用是直接 console.log(checkStatus) 后以为 data 字段不存在——其实它存在,但只有在启用了 checkbox 类型的列且用户真有勾选时才非空:
// 正确用法示例
var checkStatus = table.checkStatus('userTable');
console.log(checkStatus.data); // 这才是选中的所有行数组
- 如果没勾选任何行,
checkStatus.data是空数组[],不是undefined - 表格初始化时未设置
id(即table.render({ id: 'userTable', ... })),checkStatus会返回undefined - 使用了
skin: 'line'或even: true不影响数据获取,但若禁用checkbox列,则无法通过勾选方式选中
单击行就取数据?注意默认行为冲突
如果同时监听了 row 和 checkbox 事件,又在 row 回调里直接弹窗显示数据,用户点复选框时也会触发 row(因为复选框在行内),造成重复响应:
- 解决办法:在
row回调里加判断if (!e.target.matches('.layui-table-cell *'))或更稳妥地,只用checkbox事件处理多选,用tool事件处理操作列按钮 - 若真要「点击行即选中并取数据」,建议关闭复选框列,改用
style: 'cursor: pointer;'加样式提示,并在row里取obj.data - 不要在
row回调里调用table.checkStatus()想“查当前哪行被点”,这是错的——row事件本身已把数据给你了











