应使用cellClass函数动态添加CSS类名;该函数接收{data, rowIndex, colIndex, td}参数,必须同步返回空格分隔的类名字符串(如'urgent bg-red'),返回空字符串或undefined则不添加类,td此时未入DOM故不可调用classList.add()。
用 cellClass 函数动态加类(Layui 2.8+ 推荐)
直接在列配置里写 cellclass,它会在每个单元格渲染前被调用,返回的字符串会作为 class 挂到 <td> 上——这是唯一官方支持、且能覆盖分页/重载/虚拟滚动的方案。
<ul>
<li>函数参数固定为 <code>{data, rowIndex, colIndex, td},其中 data 是当前行完整数据对象
return 'urgent bg-red';返回空字符串或 undefined 就不加类td.classList.add()——此时 td 还没插入 DOM,操作无效'status-error text-white'
fetch),会导致返回 undefined,类名根本加不上老版本(cellClass 不可用)只能靠 done 回调 + DOM 查找
如果用的是 Layui 2.7 或更早,cellClass 不存在,就得等表格渲染完再手动加 class。但必须注意:done 只保证“数据加载完成”,不保证 DOM 已就绪,尤其开了 height(虚拟滚动)时,tbody 里只存在可视区域的 tr。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
- 优先用字段名定位,而不是
eq():用$tr.find('td[data-field="amount"]'),避免列顺序变动导致错位 - 每次
done都会触发,要先移除旧类再加新类,否则越积越多:$td.removeClass('old').addClass('new') - 服务端分页下,
res.data只有当前页数据,index是页内序号,得结合data-index属性精准匹配:$(`tr[data-index="${index}"] td[data-field="status"]`) - 虚拟滚动场景下,
done只处理当前可视行,滚动后新出现的行不会自动加类——这时真该升级 Layui 了
为什么不能在 templet 里直接写 class?
很多人试过在 templet 字符串里写 <div class="my-cell">{{d.value}}</div>,结果发现样式没生效。因为 Layui 会把这段内容塞进一个内层 <div> 或 <code><code> 容器里,你写的 class 只作用于那个内层元素,不是最外层的 <td>。
<ul><li>想控制 <code><td> 自身样式(比如边框、背景、对齐),必须让 class 出现在 <code><td> 标签上
<li>哪怕只是加个 <code>text-center,也得走 cellClass 或 done 查 DOM 的路子
templet 返回带唯一 data-* 属性的 HTML,再在 done 里用属性查,但绕远了,不推荐CSS 类必须自己定义,且注意权重
Layui 表格默认给 <td> 加了内联样式和基础 class(如 <code>layui-table-cell),你自定义的 class 很容易被覆盖。
- 背景色、字体颜色这类属性,大概率需要
!important才能生效 - 选择器尽量具体,比如用
.layui-table .status-error而不是单纯.status-error - 别漏掉移动端适配:有些 class 在小屏下会被
@media覆盖,加个min-width: 0或word-break: break-all更稳妥 - 如果用了
skin: 'line'或'nob',检查皮肤 CSS 是否重置了 padding/border,可能需要额外覆盖
done 加的类会消失,而 cellClass 是每次重绘都重新执行的。这点最容易被忽略。










