LayUI高亮显示数据表格中某行数据

Layui高亮显示数据表格中某行数据

需求：需要在数据表格中高亮显示今日的考勤记录，即签到时间(yyyy-MM-dd) === 今日时间(yyyy-MM-dd)即为今日考勤记录

1. HTML代码

    <table id="Attendance-Student-List" lay-filter="Attendance-Student-List"></table>

2. JS代码

    table.render({
            elem: '#Attendance-Student-List'
            , headers: {token: layui.data(setter.tableName).token}
            , url: setter.requestPath + '/demo'
            , method: 'get'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'gradeTitle', minWidth: 250, title: '班级名称', align: 'center'}
                , {field: 'studentName', width: 140, title: '学生姓名', align: 'center'}
                , {field: 'attendanceStatus', width: 140, title: '考勤状态', align: 'center', templet: '#AttendanceStatus'}
                , {field: 'consumePeriod', width: 140, title: '消耗课时', align: 'center'}
                , {field: 'attendancePicturesUrl', width: 140, title: '考勤图片', align: 'center', templet: '#AttendancePicturesUrl'}
                , {field: 'attendanceTime', width: 140, title: '签到时间', align: 'center'}
                , {field: 'remarks', width: 230, title: '备注', align: 'center'}
                , {field: 'createTime', width: 140, title: '创建时间', align: 'center'}
            ]]
            , page: true
            , limit: 20
            , limits: [20, 30, 40, 50, 60, 75, 90]
            , loading: true
            , text: {
                none: '这里什么也没有~'
            }
            , done: function (res) {
                let data = res.data;
                layui.each(data,function (i) {
                   if (data[i].attendanceTime === layui.util.toDateString(new Date(),'yyyy-MM-dd')){
                       let trs = $('div[lay-id=Attendance-Student-List] .layui-table-body tr');
                       layui.each(trs,function (j){
                           if (trs.eq(j).data('index') === i){
                               trs.eq(j).addClass('layui-table-highlight');
                           }
                       });
                   }
                })
            }
        });

3. 需要在当前页面添加自定义的CSS样式

    .layui-table-highlight {
        background-color: #5FB878;
        color: #ffffff;
    }

    .layui-table-highlight:hover {
        background-color: #7ebd90 !important;
    }