如何优雅的进行单元格合并

缘起

在前端开发过程中，大家想必都遇到过合并单元格的场景，那么你是怎么做的呢？欢迎分享， 这里分享我的方法供大家借鉴。 主要实现了2个方法 rowspan(colIdx) 和 copyRowspan (fromColIdx, toColIdx) 。rowspan 方法根据上下相邻的单元格内容相同则合并为一个。 copyRowspan 方法复制某列的合并规则。 一般这2个方法配合使用，可以完成比较复杂的单元格合并逻辑。
先上个效果图：

如图示，完成了 第0、1、2、3、7列的合并。

效果图

下面代码是生成上图效果的的代码，代码相当简单：

$('#comboTable').on('draw.dt', function () {
    $(this).rowspan(0);  // 0列内单元格值相同会被合并
    $(this).copyRowspan(0, 1);  //复制0列的合并规则 到 1列
    $(this).copyRowspan(0, 2);
    $(this).copyRowspan(0, 3);
    $(this).copyRowspan(0, 7);

});

rowspan和copyRowspan是如何实现的呢？

直接上代码了，不再详述原理，有研究精神的同学可以看代码研究下，如果有bug欢迎留言反馈。 偷懒的同学可以复制黏贴了。

(function ($) {
    $.fn.extend({  //把如下2个方法，添加到jquery库中。
        "rowspan": function (colIdx) { //colIdx要合并的列序号，从0开始,  单元格中text（这个地方也可以改为html）相同则合并。 
            return this.each(function () {
                var that;
                $('tr', this).each(function (row) {
                    $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
                        if (that != null && $(this).text() == $(that).text()) {
                            var rowspan = $(that).attr("rowSpan");
                            if (rowspan == undefined) {
                                $(that).attr("rowSpan", 1);
                                rowspan = $(that).attr("rowSpan");
                            }
                            rowspan = Number(rowspan) + 1;
                            $(that).attr("rowSpan", rowspan);
                            $(this).hide();
                        } else {
                            that = this;
                        }
                    });
                });
            });
        },
        "copyRowspan": function (fromColIdx, toColIdx) { //复制源列的单元格合并规则
            return this.each(function () {
                $('tr', this).each(function (row) {
                    var rowspan = $('td:eq(' + fromColIdx + ')', this).attr("rowSpan");
                    var style = $('td:eq(' + fromColIdx + ')', this).attr("style");

                    if (rowspan != undefined) {
                        $('td:eq(' + toColIdx + ')', this).attr("rowSpan", Number(rowspan));
                    }
                    if (style != undefined) {
                        $('td:eq(' + toColIdx + ')', this).attr("style", style);
                    }
                });
            });
        }
    });

})(jQuery);