本文介绍如何在 layui table 中通过 JavaScript 直接操作 DOM 来修改指定行的字体颜色。核心思路是在表格渲染完成的 done 事件中，获取对应 div 下的 table_main 元素，遍历 tr 标签并修改其 style.color 属性。该方法比依赖单元格内容更灵活，适用于需要统一调整整行文字颜色的场景。
layui table 修改行字体颜色的实现思路
layui table 组件原生支持根据单元格内容来设置单个单元格的背景或字体颜色，但当需要同时修改多列甚至整行的样式时，这种方式显得不够便捷。相比之下，直接通过 JavaScript 操作 DOM 元素来实现样式修改更为简单直接。
实现思路是自定义一个 div 容器，将 table 放置其中。通过 class 名称定位到具体的 table 元素，进而找到对应的行（tr），最后修改该行样式中的颜色属性即可。
核心 JS 函数实现
//设置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 设置某一行的字体颜色的方法就是本文分享的全部内容，希望能为大家提供有效的参考。