layui当前表格第一行_LayUI之table数据表格获取行、行高亮等相关操作-优快云博客

本文介绍如何使用LayUI的table模块渲染表格，并实现表格数据的处理，包括获取行数据、设置表格标题字体加粗、隐藏列以及对特定数据行进行背景色高亮显示。示例中，当竞猜数量大于30时，对应行会被标记为黄色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Title

12 (function() {13 layui.use(['table','layer'],function() {14 vartable=layui.table;15 varlayer=layui.layer;16 var$=layui.jquery;17 table.render({18 id:"tableID"//设定表格的唯一ID进行标识

19 , elem:'#tableDataLoad'//绑定table对应的元素

20 , height:'full-300'

21 , url:'data2.json' //TODO: 此处写你实际数据来源

22 , size:'sm'

23 , page:true

24 , limits: [10,20,30,40,50]25 , limit:30

26 , cols: [[27 {field:'match_name', width:93, align:'center', title:'比赛名称', rowspan:2}28 , {align:'center', title:'比赛信息', colspan:3}29 , {field:'jingcai', width:200, align:'center', title:'竞猜项', rowspan:2}30 , {field:'num', width:100, align:'center', title:'竞猜数量', rowspan:2}31 ]32 , [33 {field:'match_time_beijing', width:200, align:'center', title:'比赛时间'}34 , {field:'match_master', width:100, align:'center', title:'主队'}35 , {field:'match_guest', width:100, align:'center', title:'客队'}36 ]]37 , done:function(res, curr, count) {//表格渲染完成之后的回调

39 $(".layui-table th").css("font-weight","bold");//设定表格标题字体加粗

41 LayUIDataTable.SetJqueryObj($);//第一步：设置jQuery对象

43 //LayUIDataTable.HideField('num');// 隐藏列-单列模式

44 //LayUIDataTable.HideField(['num','match_guest']);// 隐藏列-多列模式

46 varcurrentRowDataList=LayUIDataTable.ParseDataTable(function(index, currentData, rowData) {47 console.log("当前页数据条数:" +currentRowDataList.length)48 console.log("当前行索引：" +index);49 console.log("触发的当前行单元格：" +currentData);50 console.log("当前行数据：" +JSON.stringify(rowData));51

52 varmsg= '

【当前页数据条数】' +currentRowDataList.length+ '
【当前行索引】' +index+ '
【触发的当前行单元格】' +currentData+ '
【当前行数据】' +JSON.stringify(rowData)+ '

';53 layer.msg(msg)54 })55

56 //对相关数据进行判断处理--此处对【竞猜数量】大于30的进行高亮显示

57 $.each(currentRowDataList,function(index, obj) {58 if(obj['num']&&obj['num'].value> 30) {59 obj['num'].row.css("background-color","#FAB000");60 }61 })62 }//end done

65 });//end table.render

67 functiondealLighthigh (rowIndexArr, bgColor) {68 $.each(rowIndexArr,function(index, val) {69 if(typeofval== "number") {70 $($(".layui-table-body.layui-table-main tr")[val]).css("background-color", bgColor?bgColor :"yellow");71 $($("div .layui-table-fixed.layui-table-fixed-l .layui-table-body tr")[val]).css("background-color", bgColor?bgColor :"yellow");72 }else if(typeofval== 'object') {73 $($(".layui-table-body.layui-table-main tr")[val.rowIndex]).css("background-color", val.bgColor?val.bgColor :"yellow");74 $($("div .layui-table-fixed.layui-table-fixed-l .layui-table-body tr")[val.rowIndex]).css("background-color", val.bgColor?val.bgColor :"yellow");75 }76 })77 }78

80 });//end layui use

81 })()82