给layui的列设置背景色，以及字体颜色

最新推荐文章于 2025-03-05 11:41:56 发布

请问你是水呢

最新推荐文章于 2025-03-05 11:41:56 发布

阅读量8.9k

点赞数 2

分类专栏： layui 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_39162838/article/details/116987962

版权

layui 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用layui框架实现表格中的字体颜色及背景颜色设置，并探讨了合并单元格的方法及其可能遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、字体颜色设置，最简单的办法

style:'color: #f6d06'

,{field: 'rongQiJiHuaCha',title: '容器',align:'center', width:'60',style:'color: #f67d06;', totalRow: true}

2、给列设置背景色

 
  done: function (res, curr, count) {
           var that = this.elem.next();
           res.data.forEach(function (item, index) {
            // 所需的条件
              if(item.shouldMonth > 0){
            // 添加颜色--#1E9FFF ；'threeMonth'根据需要填充背景色的field进行更改
                that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='threeMonth']").css("background-color", "#1E9FFF");
            }
           });}

表格渲染代码

/* 疑问：想在最后加一列备注，合并4行，但是失败，样式会乱，如果加在供应商名称后，就没问题*/
            table.render({
                elem: '#tableList'
                ,url:'${pageContext.request.contextPath }/kanban/piLiangChaiXiangKanBan.do'
                ,id :'contentTable'
                ,totalRow: true //开启合计行
                ,page : false
                ,height : 600
                ,cols: [
                    [
                        {title:'序号',width: 50,type:'numbers', align:'center', rowspan: 4}
                        ,{field: 'customer_name', title:'供应商名称', width:'150', align:'center', rowspan: 4, totalRowText: '合计：'}
                        ,{title:'倒箱品库存现况', align:'center', colspan: 14}
                        ,{title:'倒箱品作业现况', align:'center', colspan: 6}

                    ],
                    [
                        {title:'库存', align:'center', rowspan: 2, colspan: 2}
                        ,{title:'日发货计划', align:'center', colspan: 8}
                        ,{title:'下趟数', align:'center', colspan: 4}
                        ,{title:'今日计划', align:'center', rowspan: 2, colspan: 2}
                        ,{title:'完成数', align:'center', rowspan: 2, colspan: 2}
                        ,{title:'未完成', align:'center', rowspan: 2, colspan: 2}
                    ],
                    [
                        {title:'计划总数', align:'center', colspan: 2}
                        ,{title:'已发货', align:'center', colspan: 2}
                        ,{title:'未发货', align:'center', colspan: 2}
                        ,{title:'差额', align:'center', colspan: 2}
                        ,{title:'计划总数', align:'center', colspan: 2}
                        ,{title:'差额', align:'center', colspan: 2}
                    ],
                    [
                        {field: 'wuLiaoKuCun',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiKuCun',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoJiHuaFaHuo',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiJiHuaFaHuo',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoYiFa',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiYiFa',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoWeiFa',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiWeiFa',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoJiHuaCha',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiJiHuaCha',title: '容器',align:'center', width:'60',style:'color: #f67d06;', totalRow: true}
                        ,{field: 'wuLiaoXiaGeJiHua',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiXiaGeJiHua',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoXiaGeJiHuaCha',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiXiaGeJiHuaCha',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoChaiJiHua',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiChaiJiHua',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoChaiYiZuo',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiChaiYiZuo',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoChaiWeiZuo',title: '物料',align:'center', width:'80',style:'color: #f67d06;', totalRow: true}
                        ,{field: 'rongQiChaiWeiZuo',title: '容器',align:'center', width:'60',style:'color: #f67d06;', totalRow: true}
                    ]
                ]
                ,done : function(res, curr, count){
                    $('th').css({
                        'background-color': '#009688', 'color': '#fff','font-weight':'bold'
                    });
                    var divArr = $(".layui-table-total div.layui-table-cell");
                    $.each(divArr,function (index,item) {
                        var _div = $(item);
                        var content = _div.html();
                        content = content.replace(".00","");
                        _div.html(content);
                    });
                    var that = this.elem.next();
                    res.data.forEach(function (item, index) {
                        // 所需的条件
                        if(item.wuLiaoJiHuaCha > 0){
                            // 添加颜色--#1E9FFF ；'threeMonth'根据需要填充背景色的field进行更改
                            that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='wuLiaoJiHuaCha']").css("background-color", "#1E9FFF");
                        }
                        if(item.wuLiaoChaiWeiZuo > 0){
                            // 添加颜色--#1E9FFF ；'threeMonth'根据需要填充背景色的field进行更改
                            that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='wuLiaoChaiWeiZuo']").css("background-color", "#1E9FFF");
                        }
                    });
                }
            });