layui table 设置某一行的字体颜色方法

layui table 修改行字体颜色的实现思路

layui table 组件原生支持根据单元格内容来设置单个单元格的背景或字体颜色，但当需要同时修改多列甚至整行的样式时，这种方式显得不够便捷。相比之下，直接通过 JavaScript 操作 DOM 元素来实现样式修改更为简单直接。

实现思路是自定义一个 div 容器，将 table 放置其中。通过 class 名称定位到具体的 table 元素，进而找到对应的行（tr），最后修改该行样式中的颜色属性即可。

//设置layui datatable的某一行的颜色
  //TabDivId:tab父div id;RowIndex:行序列号，从0开始；ColorString：颜色字符串，如'#123456'
  function Layui_SetDataTableRowColor(TabDivId,RowIndex, ColorString)
  {
    try
    {
      var div = document.getElementById(TabDivId);
      if(div != null) //找到对象了
      {
        var table_main = div.getElementsByClassName('layui-table-main');  //通过class获取table_main
        if (table_main != null && table_main.length > 0)
        {
          var table = table_main[0].getElementsByClassName('layui-table');  //通过class获取table
          if (table != null && table.length > 0) {
            var trs = table[0].querySelectorAll("tr");
            if (trs != null && trs.length > 0) {
              trs[RowIndex].style.color = ColorString;
            }
          }
        }
        
      }
    }
    catch(e)
    {
      console.log(e.message);
    }
  }

需要注意的是，调用修改样式的代码必须等待 table 渲染完成后执行。通常的做法是将该逻辑放置在 layui table 的渲染完成事件（done 回调）中调用，以确保 DOM 元素已存在。

, done: function (res, curr, count) {
    //如果是异步请求数据方式，res即为你接口返回的信息。
    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
    console.log(res);
 
    //得到当前页码
    console.log(curr);
 
    //得到数据总量
    console.log(count);
 
    Layui_SetDataTableRowColor('tabl_panel_id1', 0, '#2c08b1');
  }

最终实现的效果如下所示：

可以看到，表格第一行的字体颜色已成功变为你所指定的颜色。

以上关于 layui table 设置某一行的字体颜色的方法就是本文分享的全部内容，希望能为大家提供有效的参考。