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

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

layui之---table设置某一行的字体颜色_第1张图片

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设置某一行的字体颜色)