layui table行鼠标悬停事件不能直接用onmouseover,因tr动态生成且DOM刷新丢失绑定;正确做法是用事件委托绑定mouseenter/mouseleave到.layui-table-body tbody tr,并配合CSS实现hover效果。
layui table 的 row 鼠标事件为什么不能直接用 onmouseover
因为 layui 表格渲染后,tr 元素是动态生成的,且被包裹在 layui-table-body 的滚动容器里;直接给原始 html 写 onmouseover 不生效,dom 一刷新就丢了。更关键的是,layui 本身不暴露行级原生 dom 节点的稳定引用,靠 initdone 回调里遍历 tr 绑事件也容易漏掉分页/重载后的行。
正确做法:用 table.on('row') + CSS hover 组合
layui 的 table.on('row') 是事件代理机制,能捕获所有行点击,但它本身不触发 mouseenter/mouseleave。所以得换思路:用 JS 控制 class 切换,再靠 CSS 实现视觉反馈。
- 在
table.render()的done回调里,给表格容器加一个自定义 class,比如layui-table-hoverable - 监听
table.on('row'),在回调里用$(this).closest('tr')拿到当前行,再手动addClass('hover')或removeClass('hover') - 但注意:
row事件只响应点击,不是鼠标移入——所以还得补一层原生事件代理
实操推荐写法:
table.render({
elem: '#demo',
url: '/api/data',
done: function(res, curr, count) {
// 确保只对当前表格生效
$(this.elem).closest('.layui-table-view').addClass('table-hover-enabled');
}
});
// 用事件委托绑定 mouseenter/mouseleave 到表格 body
$(document).on('mouseenter', '.table-hover-enabled .layui-table-body tbody tr', function() {
$(this).addClass('layui-table-hover');
});
$(document).on('mouseleave', '.table-hover-enabled .layui-table-body tbody tr', function() {
$(this).removeClass('layui-table-hover');
});
然后加 CSS:
.layui-table-hover { background-color: #f8f9fa !important; }
为什么不用 table.on('rowDouble') 或 event 参数里的 e.target
因为 rowDouble 仍是点击类事件,且 e.target 指向的是 td 或内部元素,不是整行;直接在 row 回调里做 $(e.target).closest('tr').hover(...) 会失败——hover() 是 jQuery 的一次性绑定,无法作用于未来插入的行。
-
row回调里的this指向的是td元素,不是tr - 试图在
row里反复调用$('tr').hover()会导致重复绑定,性能下降且行为错乱 - layui 2.8+ 的
data参数不包含 DOM 节点引用,无法提前缓存
兼容性与容易踩的坑
layui 默认表格有固定表头,.layui-table-body 是独立滚动区域,所以必须把事件委托目标定在它内部的 tbody tr,而不是外层 .layui-table——否则滚动后新出现的行不会触发事件。
- 如果用了
skin: 'line'或'nob',CSS 选择器要同步调整,避免被覆盖 - 开启分页时,
done回调每页都会触发,但事件委托只需绑定一次,别在done里重复on('mouseenter') - 移动端无 hover 效果,如需兼容,得额外监听
click并 toggle class,或改用touchstart - 自定义模板列(
templet)里如果有button或a,它们的mouseenter会冒泡,但不会影响tr的绑定,无需特殊处理
最麻烦的其实是表格重载(table.reload())后,之前加的 class 还在,但新行没绑定事件——所以事件委托必须用 document 级,且选择器带唯一标识(比如上面的 .table-hover-enabled),不能依赖临时 class 名。










