Layui資料表格設定選中行背景及字型顏色
阿新 • • 發佈：2020-07-15
話不多說直接上程式碼：
1 $(function () { 2 var countNum = 0; 3 var t; 4 layui.use(['form', 'table'], function () { 5 var table = layui.table; 6 var form = layui.form; 7 8 9 form.on('submit(exportData)', function (data) { 10 11 $.ajax({ 12 type: 'POST',13 url: 'handler/ExportHandler.ashx?flag=6', 14 data: { cyc: data.field.cyc, zyq: data.field.quiz1, qk: data.field.quiz2, jh: data.field.jh, ny: ny }, 15 success: function (date) { 16 console.log("success"); 17 $("#downloadRul").attr("href", date);18 $('#downloadRul>p').trigger("click"); 19 20 }, 21 // dataType: "json" 22 }); 23 //window.location = "ExportHandler.ashx"; 24 25 return false; 26 }); 27 table.render({28 id:'jh', 29 elem: '#jhList' 30 , height: 'full-200' 31 , url: 'handler/WellList.ashx' //資料介面 32 , cellMinWidth: '20' 33 , page: false //開啟分頁 34 , limits: [150, 300, 450] 35 ,even:true 36 , cols: [[ 37 { field: 'JH1', title: '預警', width:'90',align: 'center'}, 38 { field: 'jh1', title: '傳輸狀態', width: '90', align: 'center' }, 39 { field: 'jhbm', title: '井名', width: '100', align: 'center'}, 40 { field: 'yidcount', title: '段數', width: '95', align: 'center'}, 41 { field: 'jh', title: 'id', align: 'center', style: 'display:none;'} 42 ]] 43 , done: function (res, curr, count) { 44 $('table.layui-table thead tr th:eq(4)').addClass('layui-hide'); 45 countNum = res.data.length; 46 $('th').css({ 'background-color': '#BCD2EE', 'color': 'black' });//設定th顏色 47 //tr隔行換色 48 var that = this.elem.next(); 49 res.data.forEach(function (item, index) { 50 51 if (index % 2 == 0) { 52 var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", '#D1EEEE'); 53 } else { 54 var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", 'white'); 55 } 56 if (index == 0) { 57 //預設選中行 58 var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", '#1E9FFF'); 59 var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("color", '#fff'); 60 var jh = item["jh"]; 61 //chart(jh, item["jhbm"]);//開啟窗體預設載入曲線 62 t = setInterval(function () { chart(jh, item["jhbm"]) }, 1000);//執行定時方法chart("","") 63 } 64 }) 65 $('td').css({ 'border': 'none' });//設定td無邊框 66 $('th').css({ 'border': 'none' });//設定th無邊框 67 $('td').css({ 'cursor': 'pointer' });//設定th無邊框 68 $('.layui-table-body').find('td').each(function (index, element) { 69 // console.log('渲染111111'); //得到被選中的值 70 if ($(this).attr('data-field') >= 0) { 71 $(this).css('display', 'none'); 72 } 73 74 }); 75 } 76 }); 77 78 //選中行後改變行背景及字型顏色 79 $("body").on('click', '.layui-table-body tr ', function () { 80 console.log(this); 81 var data_index = $(this).attr('data-index');//得到當前的tr的index 82 console.log($(this).attr('data-index')); 83 for (var i = 0 ; i < countNum; i++)//countNum為總行數 84 { 85 if (i % 2 == 0) { //設定隔行換色 86 $(".layui-table-body tr[data-index=" + i + "]").attr({ "style": "background:#D1EEEE;color:black" });//恢復原有tr顏色 87 } else { 88 $(".layui-table-body tr[data-index=" + i + "]").attr({ "style": "background:#fff;color:black" });//恢復原有tr顏色 89 } 90 } 91 $(".layui-table-body tr[data-index=" + data_index + "]").attr({ "style": "background:#1E9FFF;color:#fff" });//改變當前tr顏色 92 93 }); 94 95 //單擊行的監聽事件 96 table.on('row(jhList)', function (obj) { 97 var jh = obj.data.jh; 98 var jhbm = obj.data.jhbm; 99 window.clearInterval(t); 100 t = setInterval(function () { chart(jh, jhbm) }, 1000); 101 //chart(jh, jhbm); 102 }); 103 }); 104 });
最主要的部分:
//選中行後改變行背景及字型顏色
$("body").on('click', '.layui-table-body tr ', function () {
console.log(this);
var data_index = $(this).attr('data-index');//得到當前的tr的index
console.log($(this).attr('data-index'));
for (var i = 0 ; i < countNum; i++)//countNum為總行數
{
if (i % 2 == 0) { //設定隔行換色
$(".layui-table-body tr[data-index=" + i + "]").attr({ "style": "background:#D1EEEE;color:black" });//恢復原有tr顏色
} else {
$(".layui-table-body tr[data-index=" + i + "]").attr({ "style": "background:#fff;color:black" });//恢復原有tr顏色
}
}
$(".layui-table-body tr[data-index=" + data_index + "]").attr({ "style": "background:#1E9FFF;color:#fff" });//改變當前tr顏色
});
如果資料表格不設定間隔換色的話還可以這樣：
//選中行後改變行背景及字型顏色
$("body").on('click', '.layui-table-body tr ', function () {
console.log(this);
var data_index = $(this).attr('data-index');//得到當前的tr的index
console.log($(this).attr('data-index'));
$(".layui-table-body tr").attr({ "style": "background:#FFFFFF; color:#666666" });//其他tr恢復顏色
$(".layui-table-body tr[data-index=" + data_index + "]").attr({ "style": "background:#F2F2F2;color:#666666" });//改變當前tr顏色
});
將整個資料表格的行都設定為相同背景及字型，再將選中的行設定想要的背景及字型，這樣更簡單。