|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<script> layui.use('table', function(){ var table = layui.table; //第一个实例 table.render({ elem: '#demo' ,height:document.body.offsetHeight ,url: './workStatu.json' //数据接口 ,cols: [[ //表头 {field: 'name', title: '第13周', width:100,fixed: 'left',align:'center'} ,{field: 'vlcc', title: '周一(3月25日)', width:115,align:'center'} ,{field: 'suezmax', title: '周一(3月25日)', width:115,align:'center'} ,{field: 'aframax', title: '周一(3月25日)', width:115,align:'center'} ,{field: 'panamax', title: '周一(3月25日)', width:119,align:'center'} ,{field: 'crudeoilmr', title: '周一(3月25日)', width:115,align:'center'} ]] ,done:function(res,curr,count){ colSpan() } }); }); function colSpan(){ var tab = document.querySelector("div .layui-table-main .layui-table");//获取目标tabel var maxRow = 6, val, count, start; count = 1; val = ""; for(var i = 0;i<tab.rows.length;i++){ //遍历所有行 for(var col = maxRow - 1; col >= 1; col--){ //遍历每一行的每一个td if(val == tab.rows[i].cells[col].innerText){ //判断前一个td和后一个td是否相同 if(tab.rows[i].cells[col].innerText.length>=4){ //判断td的值的长度是否大于4，因为这里的需求是长度大于4有相同的才合并 count++; tab.rows[i].cells[col].colSpan = count; for(var j = 1;j<count;j++){ tab.rows[i].cells[j+col].style.display = "none";//相邻的有相同的值，第一个设置colspan，后面的隐藏 } } }else{ if(count>1){ count = 1; } val = tab.rows[i].cells[col].innerText; } } } } </script> |
layui数据表格固定头部和第一列、colspan合并列
layui官方文档地址：https://www.layui.com/demo/table/fixed.html