讲师中心 微信公众号
AI工具推荐 视频效率加速

Layui表格怎么设置合计行(totalRow)的背景颜色

风强吖_1163

风强吖_1163

发布时间:2026-04-17 03:41:38

|

765人浏览过

|

来源于php中文网

原创

layui table 的 totalRow 样式不能直接用 skin 或 even 控制,因其是渲染后单独插入的 DOM,不参与奇偶行和主题色逻辑;需用 CSS 精准定位 .layui-table tbody .layui-table-total 并加 !important 覆盖,固定列区域还需额外处理 .layui-table-patch。

layui表格怎么设置合计行(totalrow)的背景颜色

layui table 的 totalRow 样式为什么不能直接用 skin 或 even 控制

因为 totalRow 是 layui 表格在渲染完所有数据后,**单独插入的一行 DOM**,它不参与常规的奇偶行(even)、主题色(skin)逻辑,也不响应 rowStyle 回调。你给表格设了 even: true 或 skin: "line",对合计行完全无效。

最稳妥的方式:用 CSS 选择器精准定位合计行并覆盖样式

layui 会给合计行自动添加 layui-table-total class,且该行始终是 <tr>,位于 <tbody> 最末。所以直接写 CSS 即可:

.layui-table tbody .layui-table-total {
  background-color: #f8f9fa !important;
  font-weight: bold;
}

注意几点:

  • !important 很关键——layui 内部有默认背景(比如白色或继承自 even),不加可能被覆盖
  • 不要只写 .layui-table-total,加上 tbody 前缀避免误命中其他同名元素
  • 如果用了固定列(fixed: "right"),右侧固定区的合计行 class 是 layui-table-patch,需额外处理:
.layui-table .layui-table-patch .layui-table-total {
  background-color: #f8f9fa !important;
}

动态修改合计行背景(比如根据数值变色)要改 DOM 属性

如果你需要在 done 回调里根据合计值动态设背景,得手动操作 DOM:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
done: function(res, curr, count) {
  const totalTr = this.elem.next('.layui-table-box').find('tbody .layui-table-total');
  if (totalTr.length) {
    const totalAmount = parseFloat($(totalTr).find('td:eq(2)').text()) || 0;
    totalTr.css('background-color', totalAmount > 10000 ? '#ffebee' : '#f0f9eb');
  }
}

关键点:

  • 合计行不在原始 this.elem(即 <table>)内,而在后续生成的 .layui-table-box 容器里
  • 用 td:eq(n) 取对应列时,n 是从 0 开始的索引,注意列顺序是否含 checkbox、toolbar 等隐藏列
  • 别忘了加 !important 的 CSS 规则仍要存在,否则 .css() 设置可能被样式表覆盖

用 totalRow 配置项 + 自定义 HTML 时,背景控制更灵活但要防 XSS

如果你启用了 totalRow: true 并配合 cols 中的 totalRowText 或返回 HTML 字符串:

{field: 'price', title: '金额', totalRowText: '<div style="background:#e3f2fd;padding:8px">合计</div>'}

这样能绕过 CSS 覆盖限制,但要注意:

  • 必须写完整 inline style,class 不生效(layui 会剥离 class 属性)
  • HTML 字符串里不能含用户输入内容,否则有 XSS 风险
  • 这种写法只影响单元格内容区域,整行背景仍需靠上面的 CSS 控制
合计行的样式控制本质是“补漏”——它游离于 layui 表格的常规样式体系之外。最常被忽略的是 .layui-table-patch 区域的样式同步,以及 !important 在 CSS 层级中的必要性。

热门AI工具

更多
VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

相关专题

更多
css3教程
css3教程

php中文网为大家提供css3教程合集,CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。php中文网还为大家带来css3的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

1900

2023.06.14

有哪些css3渐变属性
有哪些css3渐变属性

css3中渐变属性有linear-gradient、radial-gradient、conic-gradient、repeating-linear-gradient、repeating-radial-gradient等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2766

2023.11.01

剧云AI短剧创作教程合集
剧云AI短剧创作教程合集

本专题聚焦剧云AI短剧创作,讲解从短剧灵感、梗概、全局大纲到分集、分场和正文的完整流程及节奏设计方法。

0

2026.10.14

剧云AI剧本创作零基础入门
剧云AI剧本创作零基础入门

本专题系统讲解剧云AI剧本创作流程,涵盖灵感、梗概、大纲、分场与正文生成,帮助新手快速完成首个中文剧本项目。

0

2026.10.14

VibeKnow文档转视频操作指南
VibeKnow文档转视频操作指南

本专题讲解VibeKnow上传Word、TXT、Markdown等材料生成视频的方法,覆盖内容解析、脚本组织、画面生成与成片检查。

0

2026.10.14

VibeKnow知识视频制作与导出详解
VibeKnow知识视频制作与导出详解

本专题整理VibeKnow从注册、素材上传、AI生成到预览导出的完整操作,帮助新手快速制作第一条知识讲解视频。

0

2026.10.14

二狗PPT大纲编辑实操指南
二狗PPT大纲编辑实操指南

本专题聚焦二狗PPT结构化大纲的生成和修改,讲解标题、正文、目录、页数与页面顺序的调整方法,提升汇报逻辑和内容完整性。

0

2026.10.14

二狗PPT文档转PPT全教程
二狗PPT文档转PPT全教程

本专题讲解二狗PPT解析Word、PDF、Excel和PPT资料的方法,涵盖文件上传、内容提取、大纲整理、异常处理与转换后校对。

0

2026.10.14

讯飞绘文全功能使用教程
讯飞绘文全功能使用教程

本专题系统整理讯飞绘文官网入口、注册登录、工作台及内容创作流程,帮助用户熟悉常用功能,快速完成首篇图文内容。

0

2026.10.14

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.9万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.1万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn