layui之---table设置某一行的字体颜色

layui表格行高亮JS实现

最新推荐文章于 2024-10-25 11:02:43 发布

原创最新推荐文章于 2024-10-25 11:02:43 发布 · 8k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JS代码在layui框架下对表格行进行高亮显示的方法。通过自定义函数Layui_SetDataTableRowColor，可以改变指定行的背景色，实现在加载页面时默认高亮首行，并在后续操作中清除样式，突出新选中的行。

需求：因为在table中具有鼠标点击事件，默认加载第一行的点击事件，但是表格上不显示，所以首次加载时默认第一行以黄颜色显示效果如下：

js代码：

//对表格中的行样式进行调整
function Layui_SetDataTableRowColor(TabDivId,RowIndex, ColorString)
   {
       try
       {
           var div = document.getElementById('referer_engine');
           if(div != null)
           {   //这里的变量需要根据自己前端的id和class进行修改。最终目的就是获取想要的行的dom对象
               var table_main = div.getElementsByClassName('layui-table-body layui-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.background = ColorString;
                       }
                   }
               }

           }
       }
       catch(e)
       {
           console.log(e.message);
       }
   }

在初始化页面时调用该函数：

Layui_SetDataTableRowColor('referer_engine', 0, '#FFFF00')

注意事项：需要在点击其他行时，也加载该函数，但是传参数不同，目的是为了清除初始化的样式，对新点击的行进行类高亮显示：

Layui_SetDataTableRowColor('referer_engine', 0, '')

layui之---table设置某一行的字体颜色

2 条评论