Jquery合并单元格（跨行）

最新推荐文章于 2025-06-18 12:07:36 发布

深蓝999

最新推荐文章于 2025-06-18 12:07:36 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

文章标签： JavaScript rowspan 合并单元格

本文链接：https://blog.youkuaiyun.com/liucuijiayou/article/details/88993810

本文介绍如何使用Jquery实现表格中指定列的数据跨行合并。通过比较当前行与下一行的第一列值，若相等则增加当前行的rowspan并删除下一行对应单元格，确保合并后表格的正确布局。在合并过程中要注意，合并后的单元格会导致下一行列数减少，因此在后续比较时需调整比较的对象，确保始终与首次出现相同数据的行进行比较。

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

目的：table指定列跨行合并单元格（当前行以第一列为列）

思路：循环遍历所有行，

当前行第1列与下一行第1列比较，如果相等，

则当前行rowspan=rowspan+1 （初始无rowspan则值默认为1）；删除下一行单元格；（注意：单元格合并之后，下一行对应列总数减少；)如：

1	A	A1
2	A	A2
3	B	B1

表1

1	A	A1
2	A	A2
3	B	B1

表2

表2 A的坐标为：row[0][1] rowindex为0 第一行共三列

表2 B的坐标为：row[2][1] rowindex为2 第三行共三列

表2 A2的坐标为：row[1][1] rowindex为1 第二行共两列

当合并单元格之后，下一行单元格被移除，循环遍历进行下一次比较的时候，如果继续使用列index=1再去找，则找到的不是我们需要的单元格，所以对比对象始终为第一次出现多个相同数据的行标，上图举例,第一行第二行内容相等：Row[0][1].rowspan+1，移除Row[1][1];当下一次比较，再使用Row[1][1]则取到的内容为A2而不是未合并前的A(表1），对比对象始终为Row[0][1],当前行index-单元格数据出现的次数=第一次出现A的为位置。

当前行第1列与下一行第1列比较，如果不相等，

单元格数据出现次数的变量置位0

如果不相等则：

    //var columnIndex = 0; //要合并的列index
    //过滤获取对象table的关键字 tableFilter="#orderGrid tbody[role='rowgroup']"
    function MergeCell(columnIndex,tableFilter) {
                        var markspan = 0;//标记单元格中相同数据出现的次数
                        //判断 若只有一行数据，则不做调整
                        if (tr < 2) { ; } else {
                            //var i=1  比较当前的tr和上一个tr的值
                            for (var i = 0; i < tr; i++) {
                                var comparerowindex = parseInt(parseInt(i) - markspan);
                                var nextindex = i + 1;
                                var curcell = $(tableFilter + "  tr:eq(" + comparerowindex + ") td:eq(" + columnIndex + ")");
                                var nextcell = $(tableFilter + "  tr:eq(" + nextindex + ") td:eq(" + columnIndex + ")");

                                console.log("row[" + comparerowindex + "][" + columnIndex + "]" + ":" + curcell.attr("rel") + "rowspan:" + curcell.attr("rowspan"));
                                console.log("row[" + nextindex + "][" + columnIndex + "]" + ":" + nextcell.attr("rel") + "rowspan:" + nextcell.attr("rowspan"));

                                var currspan = curcell.attr("rowspan");
                                if (currspan == undefined || currspan == "") { curcell.attr("rowspan", 1); currspan = 1; }

                                if (curcell.text() == nextcell.text()) {
                                    markspan += 1;
                                    curcell.attr("rowspan", (parseInt(currspan) + 1));
                                    nextcell.remove();
                                } else { markspan = 0; }
                                console.log("has " + markspan + "条数据相同合并");
                            }
                        }

    }

//调用MergeCell(1,"#orderGrid tbody[role='rowgroup']");