layui table 合并单元格

最新推荐文章于 2025-09-11 02:14:18 发布

原创最新推荐文章于 2025-09-11 02:14:18 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的表格数据合并方法。该方法通过遍历表格中的每一列，检查相邻行的数据是否相同来实现单元格的合并。当发现连续多行的同一列数据相同时，则设置这些单元格的rowSpan属性进行合并，并隐藏多余的单元格。

colSpan: function () {
var tab = document.querySelector("div .layui-table-main .layui-table");
var maxCol = 2, val, count, start;

for (var col = maxCol - 1; col >= 1; col--) {
count = 1;
val = "";
for (var i = 0; i < tab.rows.length; i++) {
if (val == tab.rows[i].cells[col].innerHTML) {
count++;
} else {
if (count > 1) { //合并
start = i - count;
tab.rows[start].cells[col].rowSpan = count;
for (var j = start + 1; j < i; j++) {
tab.rows[j].cells[col].style.display = "none";
}
count = 1;
}
val = tab.rows[i].cells[col].innerHTML;
}
}
if (count > 1) { //合并，最后几行相同的情况下
start = i - count;
tab.rows[start].cells[col].rowSpan = count;
for (var j = start + 1; j < i; j++) {
tab.rows[j].cells[col].style.display = "none";
}
}
}
}