layui table設(shè)置某一行的字體顏色方法
table自帶的可以設(shè)置某一個單元格顏色,必須根據(jù)內(nèi)容來修改,對于很多列同時修改并不方便,直接使用js操作比較簡單。
首先自定義一個div,內(nèi)部存放table,根據(jù)class找到table,然后找到行tr,修改其樣式中的顏色。
//設(shè)置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); } }
注意調(diào)用時必須要等table渲染完成后進(jìn)行調(diào)用,可以放到渲染完成事件中調(diào)用。
, done: function (res, curr, count) { //如果是異步請求數(shù)據(jù)方式,res即為你接口返回的信息。 //如果是直接賦值的方式,res即為:{data: [], count: 99} data為當(dāng)前頁數(shù)據(jù)、count為數(shù)據(jù)總長度 console.log(res); //得到當(dāng)前頁碼 console.log(curr); //得到數(shù)據(jù)總量 console.log(count); Layui_SetDataTableRowColor('tabl_panel_id1', 0, '#2c08b1'); }
最終效果如下:
第一行的顏色變?yōu)槟阆朐O(shè)置的顏色了。
以上這篇layui table設(shè)置某一行的字體顏色方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
為網(wǎng)站代碼塊pre標(biāo)簽增加一個復(fù)制代碼按鈕代碼
寫文章的時候,作為一名專業(yè)的碼農(nóng),經(jīng)常會在文章中粘貼一些代碼。有的時候代碼塊比較長,在后期使用中需要復(fù)制這段代碼就比較麻煩2021-11-11JavaScript實(shí)現(xiàn)好看的跟隨彩色氣泡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)好看的跟隨彩色氣泡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-02-02javascript實(shí)現(xiàn)頁面的實(shí)時時鐘顯示示例
這篇文章主要介紹了javascript實(shí)現(xiàn)頁面的實(shí)時時鐘顯示示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08JavaScript如何監(jiān)測數(shù)組的變化
最近在造輪子的時候遇到了這么一個問題,那就是數(shù)組在調(diào)用內(nèi)部方法的時候怎么才可以監(jiān)聽到數(shù)組發(fā)生了變化,這篇文章主要給大家介紹了關(guān)于JavaScript如何監(jiān)測數(shù)組變化的相關(guān)資料,需要的朋友可以參考下2021-07-07JS實(shí)現(xiàn)仿PS的調(diào)色板效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)仿PS的調(diào)色板效果,結(jié)合完整實(shí)例形式分析了javascript通過運(yùn)算與動態(tài)操作頁面元素實(shí)現(xiàn)調(diào)色板功能的相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-12-12