layui table 隔行变色必须用 rowstyle 回调或 done 回调 js 打标,因 :nth-child(even) 在 fixed 列或虚拟滚动下错位;rowstyle 必须返回 {css: {...}} 或 {class: '...'} 对象,且需设 skin: 'default',reload 时须重传函数。

layui table 没有内置的 stripe 或 even 开关,直接写 CSS 的 :nth-child(even) 在 fixed 列或虚拟滚动下必然错位 —— 必须用 rowStyle 回调,或在 done 回调里 JS 打标。
用 rowStyle 最稳,但必须返回对象
这是官方唯一支持、且翻页/排序自动重执行的机制。常见错误是写成字符串或漏掉 css 字段:
-
rowStyle必须是函数,不能是字符串(如'background: #f9f9f9;') - 必须返回形如
{css: {backgroundColor: '#f8f9fa'}}或{class: 'row-even'}的对象 -
index从 0 开始,index % 2 === 0对应第 1、3、5… 行(视觉奇数行) - 如果用了
skin: 'line'或skin: 'nob',rowStyle会失效,需显式设为skin: 'default'
示例:
rowStyle: function(row, index) {
return {class: index % 2 === 0 ? 'row-even' : 'row-odd'};
}
启用了 fixed 或设置了 height?别信 :nth-child
当表格有左/右固定列,或设置了 height 触发虚拟滚动时,Layui 会把 tbody 拆成多个独立 <table> 块(主表体 + 固定列),<code>:nth-child 在每个块内单独计数,视觉上隔行就断开了。
- 此时只能靠 JS 动态打标,在
done回调里遍历所有真实数据行 - 要分别处理主表体、左固定列、右固定列:
.layui-table-body tbody tr、.layui-table-fixed-l tbody tr、.layui-table-fixed-r tbody tr - 记得过滤掉表头、空提示行(
.layui-table-empty)、合计行(.layui-table-total)
示例:
done: function(res, curr, count) {
const $body = $(this.elem).next('.layui-table-box').find('.layui-table-body tbody tr');
const $fixedL = $(this.elem).next('.layui-table-box').find('.layui-table-fixed-l tbody tr');
const $fixedR = $(this.elem).next('.layui-table-box').find('.layui-table-fixed-r tbody tr');
[$body, $fixedL, $fixedR].forEach($trList => {
$trList.each(function(i) {
$(this).toggleClass('layui-table-striped', i % 2 === 0);
});
});
}
reload() 后样式丢失?得重传 rowStyle 函数
table.reload() 只刷新数据并重建 DOM,但不会重新执行初始化时传入的 rowStyle —— 如果你写的是内联函数,它在 reload 时会被丢弃。
- 每次
reload都必须显式传入完整配置,包括rowStyle函数本身 - 逻辑复杂时,建议抽成具名函数,比如
rowStyle: setRowBg,避免内联函数被 GC 或作用域丢失 - 不要在
done里手动加 class 或改 style,效率低、易漏固定列、且和 layui 渲染逻辑冲突
CSS 里必须加 !important,还要补 hover 和选中态
Layui 默认给 tr 写了内联样式,不加 !important 很可能被覆盖;另外只设背景色,不处理 hover 和选中态,颜色会打架。
- 基础隔行色:
.row-even { background-color: #f8f9fa !important; } - hover 态:
.layui-table tbody tr:hover, .layui-table-hover { background-color: #e9ecef !important; } - 选中态(checkbox/radio):
.layui-table-click { background-color: #dee2e6 !important; } - 深色主题下注意文字色,避免灰字配浅灰底看不清
如果表格开启了自带的 even: true,务必关掉:even: false,否则 class 和内置样式冲突。











