How to realize merging cells of dynamic tables by layui

This article is about how layui implements merging cells in dynamic tables. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Demand:

The following excel table is used to roughly simulate the requirements. The left side is the original, and it should be changed to something like this on the right:

Step 1 of ①: call this method after generating the table to merge duplicate cells

Done: function (res, curr, count) {merge (res);}

Step 2 of ②: write this method:

Function merge (res) {var data = res.data; var mergeIndex = 0 id','name' / locate the number of rows that need to add merge attributes var mark = 1; / / A simple operation is involved here. Mark is to calculate the number of cells that need to be merged each time. Var columsIndex = [010] / / column index value for (var k = 0; k) to be merged

< columsName.length; k++) { //这里循环所有要合并的列 var trArr = $(".layui-table-body>

.layui-table ") .find (" tr "); / / all rows for (var I = 1; I < res.data.length; iTunes +) {/ / the current data of the circular table here var tdCurArr = trArr.eq (I). Find (" td ") .eq (columsIndex [k]) / / get the current column of the current row var tdPreArr = trArr.eq (mergeIndex) .find ("td") .eq (columsIndex [k]) / / get the first column if of the same column (data [I] [columsname [k] = = data [I-1] [columsname [k]]) {/ / the value of the latter row is compared with that of the previous row, and the same requires merging mark + = 1 TdPreArr.each (function () {/ / the first column of the same column adds the rowspan attribute $(this) .attr ("rowspan", mark);}) TdCurArr.each (function () {/ / current line hidden $(this) .css ("display", "none");});} else {mergeIndex = I; mark = 1 / / once the values of the front and back lines are different, then the number of cells to be merged mark needs to be recalculated}} mergeIndex = 0; mark = 1;} thank you for reading! On "layui how to achieve dynamic table merge cells" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!