layui渲染表格使得某个单元格背景颜色按照要求进行变色

  最近需要实现一个功能，根据返回的值的情况，使得layui某个单元格显示特定的颜色。下面我将解决思路和碰到的坑给大家讲一下

html前端页面是这个样子的

在前面的html页面里面的写法是这个样子的

   现在就是假设需要实现这样的功能，在表的姓名列，如果返回某个特定的名字，就设置这个单元格背景为红色，不是设置这一整行为红色！

  起初我的想法就是使用$("#trainList")的方法选中这个table，然后遍历这个表的行和列，然后再设置样色样式，然而选中的情况是只有一行。

  原因可能是layui只渲染了这个标题行，并不是在这里渲染的数据列，这是我碰到的第一个坑

 接下来，第二个坑，如果是的表格的标题栏有fixed属性，那么恭喜你，你会跟我一样碰到第二个坑，就是发现需要渲染的单元格怎么都变不了颜色，或者明明想让某一行都变色，结果就是有几个单元格变不了颜色，原因是layui渲染表格时，会让fixed属性的列单独渲染，导致你选不到，造成添加颜色样式失败

解决办法是属性列中去掉fixed属性

明白以上坑后，下面再解决如何渲染指定单元格的方法

//执行渲染
table.render({
    elem: '#trainList' //指定原始表格元素选择器（推荐id选择器）
    ,id:"trainList"
    ,height: 'full-100' //容器高度
    ,page:false
    ,title: '培训记录表'
    ,limit: 1000
    //,skin: 'row'//这一行和下一行用来使数据隔行显示
    //,even: true
    ,cols: [[
        {
         field: 'realname', title: '姓名', width: '5%', unresize: true, edit: false, sort: false
        },
        { field: 'cardDate', title: '打卡时间', width: '10%',  unresize: true, edit: false, sort: false },
        { field: 'record', title: '当天记录', width: '85%', sort: false }
        //{ field: 'totalHour', title: '累计小时数', width: '10%', sort: false }
        ]] //设置表头
    ,
    done: function (res,curr,count)
    {
       // console.log(res);
        //得到当前页码
        console.log(curr);
        //得到数据总量
        console.log(count);
        Layui_SetDataTableRowColor2();
    }
});

首先在表格处添加done方法，具体用法详见layui官网数据表格页，然后也就是最关键的，怎么获取到这个表格的数据

做法是，在网页端的html部分，在这个表格的定义处的上一级div添加一个id字段，方便等会jquery找到它

如下图

然后就是不断的进行js读取结点的操作，接下来的你的网页结构可能与我不同，但是原理差不多，主要就是用到.children()，取下面的第几个结点，getElementsByClassName这几个js方法反复使用，一直获取到<table>的html段，如下图

let div=$("#divId");
console.log('div',div);
let nodeDivList=div.children();
console.log("nodeDivList",nodeDivList);
let nodeDiv2=nodeDivList[2];
console.log("nodeDiv2",nodeDiv2);
let table1=nodeDiv2.getElementsByClassName('layui-table-box');
console.log("table123",table1);
//let nodeDivList2=table1.children();
console.log("table2",table1[0]);
let t1=table1[0].getElementsByClassName('layui-table-body layui-table-main');
//t1就是获取到的最终数据表格，包括数据的真表格
if (t1 != null && t1.length > 0) {
    //查询t1的所有tr标签
    let trs = t1[0].querySelectorAll("tr");
    //遍历所有行和所有单元格，找到姓名是XX的，然后设置背景颜色为红色
    for(let i=0;i<trs.length;i++){
        let tds=trs[i].querySelectorAll("td");
        for(let j=0;j<tds.length;j++){
            if(tds[j].innerText==="XXX"){
                //以下具体逻辑可根据实际业务需求修改
                console.log("找到XXX的值了........");
                console.log("tds["+j+"]",tds[j]);
                tds[j].style.backgroundColor= '#FF0000';//背景颜色
                //  tds[j].bgColor= '#FF0000';//背景颜色
                //trs[i].style.backgroundColor= '#FF0000';//背景颜色
                console.log('trs['+i+']',trs[i]);
            }
        }
    }
}