layui 表格按照某一列的值划分颜色

爱被打了一巴掌 2023-02-09 11:47 4阅读 0赞

参考：

table.render({
              elem: "#test",
              // id: "table_cell_data",
              url: "http://localhost:3000/all",
              toolbar: "#toolbarDemo", //指向自定义工具栏模板选择器
              defaultToolbar: [], //除去打印，导出
              title: "用户数据表",
              cols: [[ ]],
              page: false,
              done: function (res, curr, count) {
                console.log(res.data);
                merge(res);
                $('tr').css({'background-color': '#009688', 'color': '#fff'});//表头样式修改
    
                var that = this.elem.next();
                console.log(this.elem)
                console.log(that)
                res.data.forEach(function (item, index) {
                    if (item.accstatus === "封禁") {
                      var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                      tr.css("background-color", "yellow");
                      tr.find(".laytable-cell-1-0-9").css("color","red");
    
                    } 
                });
              }
            });

我的改造

,done: function (res, curr, count) {
                    var that = this.elem.next();
                    var tempValue = '';
                    var num = 1;
                    var colors = [ "#FFC8B4",'#CCDDFF'];
                    res.data.forEach(function (item, index) {
                        if (item.file != tempValue) {
                            tempValue = item.file;
                            num = num + 1
                        }
                        var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                        //tr.find(".laytable-cell-1-0-9").css("color","red");
                        tr.css("background-color", colors[num%2]);
                    });
                }

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsYmdfYm95_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsYmdfYm95_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200518165838953.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsYmdfYm95,size_16,color_FFFFFF,t_70