需求:因为在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, '')