layui table設置某一行的字體顏色方法
更新時間:2019年09月05日 12:01:05 作者:cp1300
今天小編就為大家分享一篇layui table設置某一行的字體顏色方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
table自帶的可以設置某一個單元格顏色,必須根據(jù)內容來修改,對于很多列同時修改并不方便,直接使用js操作比較簡單。
首先自定義一個div,內部存放table,根據(jù)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渲染完成后進行調用,可以放到渲染完成事件中調用。
, done: function (res, curr, count) { //如果是異步請求數(shù)據(jù)方式,res即為你接口返回的信息。 //如果是直接賦值的方式,res即為:{data: [], count: 99} data為當前頁數(shù)據(jù)、count為數(shù)據(jù)總長度 console.log(res); //得到當前頁碼 console.log(curr); //得到數(shù)據(jù)總量 console.log(count); Layui_SetDataTableRowColor('tabl_panel_id1', 0, '#2c08b1'); }
最終效果如下:
第一行的顏色變?yōu)槟阆朐O置的顏色了。
以上這篇layui table設置某一行的字體顏色方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
JavaScript如何監(jiān)測數(shù)組的變化
最近在造輪子的時候遇到了這么一個問題,那就是數(shù)組在調用內部方法的時候怎么才可以監(jiān)聽到數(shù)組發(fā)生了變化,這篇文章主要給大家介紹了關于JavaScript如何監(jiān)測數(shù)組變化的相關資料,需要的朋友可以參考下2021-07-07