首页 > 网页制作 >Layui表格怎么给某一行添加删除线样式

Layui表格怎么给某一行添加删除线样式

来源：互联网 2026-04-15 09:12:03

为layui表格添加删除线的最稳方法在layui table中实现删除线效果，直接设置rowStyle或cellStyle常常无效。这是因为表格渲染完成后，预设的样式函数不会再次执行。可靠的方法是从数据层或DOM层入手。 rowStyle为何无法添加删除线 rowStyle函数返回的样式仅作用于元

为layui表格添加删除线的最稳方法

在layui table中实现删除线效果，直接设置rowStyle或cellStyle常常无效。这是因为表格渲染完成后，预设的样式函数不会再次执行。可靠的方法是从数据层或DOM层入手。

rowStyle为何无法添加删除线

rowStyle函数返回的样式仅作用于元素本身。而text-decoration这类文本样式必须精确应用到包含文字的单元格子元素上。即便在rowStyle中设置textDecoration: 'line-through'，浏览器也不会将其继承到单元格内部。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

推荐方案：done回调结合CSS类

核心思路是在表格渲染完成后，根据数据标识字段为对应行添加自定义CSS类，再用CSS统一控制删除线显示。

table.render({
  elem: '#demo',
  url: '/api/list',
  cols: [[
    {field: 'id', title: 'ID'},
    {field: 'name', title: '姓名'}
  ]],
  done: function(res, curr, count) {
    // 假设数据包含isDeleted字段
    this.elem.next('.layui-table-box').find('tbody tr').each(function(i, tr) {
      const data = res.data[i];
      if (data && data.isDeleted) {
        $(tr).addClass('deleted-row');
      }
    });
  }
});

对应的CSS样式应这样定义：

.deleted-row .layui-table-cell,
.deleted-row .layui-table-cell * {
  text-decoration: line-through !important;
}

不使用jQuery的纯JavaScript实现

如果项目中未使用jQuery，可在done回调中使用原生DOM方法操作：

done: function(res, curr, count) {
  const tableBox = this.elem.nextElementSibling.querySelector('.layui-table-box');
  const rows = tableBox.querySelectorAll('tbody tr');
  rows.forEach((tr, i) => {
    const data = res.data[i];
    if (data.isDeleted) {
      tr.classList.add('deleted-row');
    }
  });
}