Layui數據表格設置選中行背景及字體顏色

話不多說直接上代碼：

$(function () {
    var countNum = 0;
    var t;
    layui.use(['form', 'table'], function () {
        var table = layui.table;
        var form = layui.form;


        form.on('submit(exportData)', function (data) {

            $.ajax({
                type: 'POST',
                url: 'handler/ExportHandler.ashx?flag=6',
                data: { cyc: data.field.cyc, zyq: data.field.quiz1, qk: data.field.quiz2, jh: data.field.jh, ny: ny },
                success: function (date) {
                    console.log("success");
                    $("#downloadRul").attr("href", date);
                    $('#downloadRul>p').trigger("click");

                },
                //                            dataType: "json"
            });
            //window.location = "ExportHandler.ashx";

            return false;
        });
   table.render({
        id:'jh',
        elem: '#jhList'
        , height: 'full-200'
        , url: 'handler/WellList.ashx' //數據接口
        , cellMinWidth: '20'
        , page: false //開啟分頁
        , limits: [150, 300, 450]
        ,even:true
        , cols: [[
          { field: 'JH1', title: '預警', width:'90',align: 'center'},
          { field: 'jh1', title: '傳輸狀態', width: '90', align: 'center' },
          { field: 'jhbm', title: '井名', width: '100', align: 'center'},
          { field: 'yidcount', title: '段數', width: '95', align: 'center'},
          { field: 'jh', title: 'id', align: 'center', style: 'display:none;'}
        ]]
       , done: function (res, curr, count) {
           $('table.layui-table thead tr th:eq(4)').addClass('layui-hide');
           countNum = res.data.length;
           $('th').css({ 'background-color': '#BCD2EE', 'color': 'black' });//設置th顏色
           //tr隔行換色
           var that = this.elem.next();
           res.data.forEach(function (item, index) {
               
               if (index % 2 == 0) {
                   var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", '#D1EEEE');
               } else {
                   var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", 'white');
               }
               if (index == 0) {
                   //默認選中行
                   var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", '#1E9FFF');
                   var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("color", '#fff');
                   var jh = item["jh"];
                   //chart(jh, item["jhbm"]);//打開窗體默認加載曲線
                   t = setInterval(function () { chart(jh, item["jhbm"]) }, 1000);//執行定時方法chart("","")
               }
           })
           $('td').css({ 'border': 'none' });//設置td無邊框
           $('th').css({ 'border': 'none' });//設置th無邊框
           $('td').css({ 'cursor': 'pointer' });//設置th無邊框
           $('.layui-table-body').find('td').each(function (index, element) {
               // console.log('渲染111111'); //得到被選中的值
               if ($(this).attr('data-field') >= 0) {
                   $(this).css('display', 'none');
               }

           });
       }
   });

   //選中行后改變行背景及字體顏色
   $("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顏色

   });

   //單擊行的監聽事件
   table.on('row(jhList)', function (obj) {
       var jh = obj.data.jh;
       var jhbm = obj.data.jhbm;
       window.clearInterval(t);
       t = setInterval(function () { chart(jh, jhbm) }, 1000);
       //chart(jh, jhbm);
   });
});
});

最主要的部分:

//選中行后改變行背景及字體顏色
   $("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顏色

        });

將整個數據表格的行都設置為相同背景及字體，再將選中的行設置想要的背景及字體，這樣更簡單。

當然還有一種情況就是當一個頁面使用到兩個或兩個以上數據表格的時候以上方法就會出現問題，但選擇其中一個表格時，其他表格也會跟着一起改變，他們所有的class都相同所以就會沖突，只有 lay-id 屬性是不同的，所以就要借助這個來定位到沒有個數據表格的每行每列及每個單元格，如下代碼給數據表格行添加觸發事件，其中JHNUM為數據表格數據的總數量，當選中某一行時把所有的行都恢復到初始顏色，再改變當前選中行的背景及字體顏色，通過$("[lay-id='jhList'] tbody tr[data-index=" + i + "]")定位到是當前我點擊的這個ID為jhList的數據表格。這樣就可以達到一個頁面有多個數據表格可以分邊改變背景顏色及字體。

 

   table.on('row(jhList)', function (obj) {
       //隔行換色，顯示當前行
       for (var i = 0 ; i < JHNUM; i++)//countNum為總行數
       {
           if (i % 2 == 0) { //設置隔行換色
               $("[lay-id='jhList'] tbody tr[data-index=" + i + "]").attr({ "style": "background:#D1EEEE;color:#666666" });//恢復原有tr顏色
           } else {
               $("[lay-id='jhList'] tbody tr[data-index=" + i + "]").attr({ "style": "background:#fff;color:#666666" });//恢復原有tr顏色
           }
       }
       $(this).attr({ "style": "background-color:#1E9FFF;color:#ffffff" });

   });