效果图：
问题：行hover效果感觉错乱 所以改为透明色
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>复杂表头+select下拉框默认值+单元格合并</title> 6 <script src="../../../static/lib/layui/layui.js" charset="utf-8"></script> 7 <style> 8 /*select下拉框显示*/ 9 td[data-field="qualityStatus"]>div { 10 overflow: inherit; 11 } 12 /*去除行点击、hover背景色*/ 13 .layui-table tbody tr:hover , .layui-table-hover , .layui-table-click{ 14 background-color: rgba(255,255,255,0); 15 } 16 </style> 17 </head> 18 <body> 19 <div class="layui-fluid"> 20 <div class="layui-row layui-col-space15"> 21 <div class="layui-col-md12"> 22 <div class="layui-card"> 23 <div class="layui-card-body"> 24 <table class="layui-hide" id="qua_standard_table" lay-filter="qua_standard_table"></table> 25 </div> 26 </div> 27 </div> 28 </div> 29 </div> 30 </body> 31 <script> 32 layui.use(['element','upload','laydate','table','form'], function(){ 33 var element = layui.element 34 ,table = layui.table, 35 laypage = layui.laypage, 36 form = layui.form, 37 upload = layui.upload, 38 laydate = layui.laydate; 39 //模拟数据 40 var selectdata = [ 41 { 42 amountOfMoney: 5000, 43 basicMeasurement: "kg", 44 certificateNumber: "内容15", 45 concession: null, 46 contentId: null, 47 disqualification: null, 48 explains: "内容67", 49 files: null, 50 id: 2, 51 inspectContent: "内容22", 52 inspectContentNumber: "内容0000", 53 inspector: null, 54 inspectorDate: null, 55 inspectorDescription: null, 56 isNumber: null, 57 main: null, 58 manufacturer: "内容44", 59 materialId: 14, 60 materialName: "内容4", 61 materialNo: "内容一", 62 materialSize: "2*3", 63 meId: null, 64 orderAmount: 100, 65 orderId: 1, 66 orderPrice: 20, 67 orderedInAmount: 0, 68 projectName: "其他", 69 purchaseMeasurement: "kg", 70 qualified: null, 71 qualityStatus: null, 72 qualityTestedInAmount: 9, 73 standard: "内容11", 74 undetectedCount: 91, 75 }, 76 { 77 amountOfMoney: 5000, 78 basicMeasurement: "kg", 79 certificateNumber: "内容14", 80 concession: null, 81 contentId: null, 82 disqualification: null, 83 explains: "内容66", 84 files: null, 85 id: 2, 86 inspectContent: "内容33", 87 inspectContentNumber: "内容1111", 88 inspector: null, 89 inspectorDate: null, 90 inspectorDescription: null, 91 isNumber: null, 92 main: null, 93 manufacturer: "内容44", 94 materialId: 14, 95 materialName: "内容4", 96 materialNo: "内容一", 97 materialSize: "2*3", 98 meId: null, 99 orderAmount: 100, 100 orderId: 1, 101 orderPrice: 20, 102 orderedInAmount: 0, 103 projectName: "其他", 104 purchaseMeasurement: "kg", 105 qualified: null, 106 qualityStatus: null, 107 qualityTestedInAmount: 9, 108 standard: "内容001", 109 undetectedCount: 91, 110 }, 111 { 112 amountOfMoney: 5000, 113 basicMeasurement: "kg", 114 certificateNumber: "内容15", 115 concession: null, 116 contentId: null, 117 disqualification: null, 118 explains: "内容67", 119 files: null, 120 id: 1, 121 inspectContent: "内容22", 122 inspectContentNumber: "内容0000", 123 inspector: null, 124 inspectorDate: null, 125 inspectorDescription: null, 126 isNumber: null, 127 main: null, 128 manufacturer: "内容45", 129 materialId: 13, 130 materialName: "内容3", 131 materialNo: "内容二", 132 materialSize: "2*3", 133 meId: null, 134 orderAmount: 100, 135 orderId: 1, 136 orderPrice: 20, 137 orderedInAmount: 0, 138 projectName: "其他", 139 purchaseMeasurement: "kg", 140 qualified: null, 141 qualityStatus: null, 142 qualityTestedInAmount: 12, 143 standard: "内容11", 144 undetectedCount: 88, 145 }, 146 { 147 amountOfMoney: 5000, 148 basicMeasurement: "kg", 149 certificateNumber: "内容14", 150 concession: null, 151 contentId: null, 152 disqualification: null, 153 explains: "内容66", 154 files: null, 155 id: 1, 156 inspectContent: "内容33", 157 inspectContentNumber: "内容1111", 158 inspector: null, 159 inspectorDate: null, 160 inspectorDescription: null, 161 isNumber: null, 162 main: null, 163 manufacturer: "内容45", 164 materialId: 13, 165 materialName: "内容3", 166 materialNo: "内容二", 167 materialSize: "2*3", 168 meId: null, 169 orderAmount: 100, 170 orderId: 1, 171 orderPrice: 20, 172 orderedInAmount: 0, 173 projectName: "其他", 174 purchaseMeasurement: "kg", 175 qualified: null, 176 qualityStatus: null, 177 qualityTestedInAmount: 12, 178 standard: "内容001", 179 undetectedCount: 88, 180 } 181 ] 182 183 //主页面数据 184 table.render({ 185 elem: '#qua_standard_table', 186 id:'qua_standard_table', 187 //url:'', 188 data:selectdata, 189 method:'POST', 190 title: '数据表', 191 height: 'full-60', 192 cellMinWidth: 120, 193 size: 'lg', 194 cols:[[ 195 {align:'center',rowspan:2, title:'序号',100,type:'numbers',field: 'num',fixed:'left'}, 196 {align:'center',rowspan:2,field: 'id', title: 'ID',hide:true},//隐藏列 197 {align:'center',rowspan:2,field:'materialNo', title:'表头',100}, 198 {align:'center',rowspan:2,field:'materialName', title:'表头'}, 199 {align:'center',rowspan:2,field:'projectName', title:'表头'}, 200 {align:'center',rowspan:2,field:'purchaseMeasurement', title:'表头'}, 201 {align:'center',rowspan:2,field:'inspectContentNumber', title:'表头'}, 202 {align:'center',rowspan:2,field:'inspectContent', title:'表头'}, 203 {align:'center',rowspan:2,field:'standard', title:'表头'}, 204 {align:'center',rowspan:2,field:'explains', title:'表头'}, 205 {align:'center',rowspan:2,field:'qualityStatus', title:'结果',templet: function (d) { 206 if(d.qualityStatus == null){ 207 return '<select name="qualityStatus" lay-filter="testSelect" lay-verify="required" >' + 208 ' <option value="0" selected>合格</option>' + 209 ' <option value="1">不合格</option>' + 210 ' </select>'; 211 } 212 213 }}, 214 {align:'center',rowspan:2,field:'certificateNumber', title:'表头',templet: function (d) { 215 if(d.certificateNumber==null || d.certificateNumber==''){ 216 return '无' 217 }else{ 218 return d.certificateNumber 219 } 220 }}, 221 {align:'center',rowspan:2,field:'undetectedCount', title:'表头'}, 222 {align:'center',field:'resultNum', title:'表头',colspan:3}, 223 {align:'center',rowspan:2,field:'qualityTestedInAmount', title:'表头'}, 224 {align:'center',rowspan:2,field:'manufacturer', title:'表头'}, 225 {align:'center',rowspan:2,field:'certificate', title:'表头', templet: function (d) { 226 return '<span class="layui-breadcrumb" lay-separator="|">' + 227 '<a href="javascript:;" lay-event="qua_standard_edit">添加附件</a>' + 228 '</span>'; 229 },fixed:'right'}, 230 {align:'center',rowspan:2,100,field: 'operation', title: '操作', templet: function (d) { 231 return '<span class="layui-breadcrumb" lay-separator="|">' + 232 '<a href="javascript:;" lay-event="qua_standard_del">删除</a>' + 233 '</span>'; 234 },fixed:'right'} 235 ], 236 [ 237 {align:'center',field:'qualified', title:'表头', edit: 'number'}, 238 {align:'center',field:'disqualification', title:'表头', edit: 'number'}, 239 {align:'center',field:'concession', title:'表头', edit: 'number'}, 240 ] 241 ], 242 done: function (res, curr, count) { 243 element.init(); 244 $('#qua_standard_table').siblings('div').find('dl').find('.layui-this').click();//模拟点击 初始化数据 245 merge(res);//合并单元格 246 } 247 }); 248 249 $('#receiptForm1').on('keyup','.layui-table-edit',function () { 250 this.value=this.value.replace(/^(0+)|[^d]+/g,'')//TODO 251 }); 252 253 //行事件 254 table.on('tool(qua_standard_table)', function(obj){ 255 256 if(obj.event === 'qua_standard_edit'){ 257 layer.msg('添加') 258 }else if(obj.event === 'qua_standard_del'){ 259 layer.msg('删除') 260 } 261 }); 262 263 }); 264 //layui 结束 265 266 //合并开始 267 function merge(res) { 268 var data = res.data; 269 var mergeIndex = 0;//定位需要添加合并属性的行数 270 var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数 271 var _number = 1;//保持序号列数字递增 272 var columsName = ['num','number','typeName','projectName','unit','suppliedNum','qualified','disqualification','concession','sum','manufacturer','certificate','operation'];//需要合并的列名称 273 var columsIndex = [0,2,3,4,5,12,13,14,15,16,17,18,19];//需要合并的列索引值 274 var mergeCondition = 'id';//需要合并的 首要条件 在这个前提下进行内容相同的合并 275 var tdArrL = $('.layui-table-fixed-l > .layui-table-body').find("tr");//序号列左定位产生的table tr 276 var tdArrR = $('.layui-table-fixed-r > .layui-table-body').find("tr");//操作列定右位产生的table tr 277 278 for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列 279 var trArr = $(".layui-table-main>.layui-table").find("tr");//所有行 280 for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据 281 282 if (data[i][mergeCondition] === data[i-1][mergeCondition]) { 283 var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列 284 var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列 285 286 if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并 287 mark += 1; 288 tdPreArr.each(function () {//相同列的第一列增加rowspan属性 289 $(this).attr("rowspan", mark); 290 }); 291 tdCurArr.each(function () {//当前行隐藏 292 $(this).css("display", "none"); 293 }); 294 }else { 295 mergeIndex = i; 296 mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算 297 } 298 } else { 299 mergeIndex = i; 300 mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算 301 } 302 303 304 } 305 mergeIndex = 0; 306 mark = 1; 307 } 308 309 310 311 312 313 //操作左右定位列的表格 314 $.each($("#qua_standard_table").siblings('.layui-table-view').find('.layui-table-main>.layui-table').find("tr"),function (i,v) { 315 if ($(v).find('td').eq(2).css('display') === 'none') { 316 tdArrL.eq(i).find('td').css('display','none'); 317 tdArrR.eq(i).find('td').css('display','none'); 318 } else { 319 tdArrL.eq(i).find('td').find('.laytable-cell-numbers').html(_number++); 320 tdArrL.eq(i).find('td').css('height',$(v).find('td').eq(2)[0].clientHeight); 321 tdArrR.eq(i).find('td').css('height',$(v).find('td').eq(2)[0].clientHeight); 322 323 } 324 }) 325 326 327 328 } 329 //合并结束 330 </script> 331 </html>