jQuery小插件实现table表格行列合并

最近在做项目时候，需求要求实现对表格中单元格列合并的功能，如果是只在某一列中进行合并操作，代码是遍历每行的某一列单元格，而这次的需求比较复杂，列数很多，都可以动态显示隐藏，原来的代码功能明显不够用了。
本插件主要用于表格单元格的纵向合并，前提，每行的 tr 里都有一个属性，比如 data-pid,当上下行数据的这个属性值相等时，将一列或者多列的单元格纵向，用 class 标识需要合并的列。有的情况下，是只有少数列不合并，因此也支持用 class 标识不需要合并列。

HTML 代码

<table>
	<thead>
		<tr>
			<th>title1</th>
			<th>title2</th>
			<th>title3</th>
			<th>title4</th>
			<th>title5</th>
			<th>title6</th>
		</tr>
	</thead>
	<tbody>
		<tr data-pid="0">
			<td class="doMerge">content1-1</td>
			<td class="doMerge">content1-2</td>
			<td>content1-3</td>
			<td>content1-4</td>
			<td class="notMerge">content1-5</td>
			<td>content1-6</td>
		</tr>
		<tr data-pid="0">
			<td class="doMerge">content2-1</td>
			<td class="doMerge">content2-2</td>
			<td>content2-3</td>
			<td>content2-4</td>
			<td class="notMerge">content2-5</td>
			<td>content2-6</td>
		</tr>
		<tr data-pid="1">
			<td class="doMerge">content3-1</td>
			<td class="doMerge">content3-2</td>
			<td>content3-3</td>
			<td>content3-4</td>
			<td class="notMerge">content3-5</td>
			<td>content3-6</td>
		</tr>
		<tr data-pid="1">
			<td class="doMerge">content4-1</td>
			<td class="doMerge">content4-2</td>
			<td>content4-3</td>
			<td>content4-4</td>
			<td class="notMerge">content4-5</td>
			<td>content4-6</td>
		</tr>
		<tr data-pid="2">
			<td class="doMerge">content5-1</td>
			<td class="doMerge">content5-2</td>
			<td>content5-3</td>
			<td>content5-4</td>
			<td class="notMerge">content5-5</td>
			<td>content5-6</td>
		</tr>
	</tbody>
</table>

css 代码

table {
    border-collapse: collapse !important;
}

th,
td {
    border: 1px solid #999;
    padding: 10px 20px;
}

插件源码

(function ($) {
    $.fn.rowSpan = function (options) {
        return this.each(function (index, element) {            
            var that = undefined;
            $('tr', this).each(function (trIndex, tr) {
                var tdSelector = 'td';
                if (typeof (options.mergeClass) !== 'undefined' && options.mergeClass.length > 0) {
                    tdSelector += '.' + options.mergeClass;
                } else {
                    tdSelector += ':not(.' + options.notMergeClass + ')';
                }
                if (typeof that !== 'undefined' &&
                    typeof ($(tr).attr(options.onAttr)) !== 'undefined' &&
                    $(tr).attr(options.onAttr) === $(that).attr(options.onAttr)) {
                    var firstTd = $(that).children(tdSelector);
                    if (firstTd.length == 0) {
                        return true;
                    }
                    var rowpan = firstTd.prop('rowspan');
                    rowpan += 1;
                    $(that).children(tdSelector).prop('rowspan', rowpan);
                    $(this).children(tdSelector).hide();
                }
                else {
                    that = tr;
                }
            });

        });
    };
})(jQuery);

参数表

调用方法

//调用实例 table 为页面里的表格
$('table').sdrowpan({
    onAttr: 'data-pid',         //tr 的属性名，两行数据中这个属性值相等时才进行合并
    mergeClass: 'doMerge',      //td 的类名，当 tr 的 onAttr 值相等时，此 td 进行合并
    notMergeClass: 'notMerge'   //td 的类名，当 tr 的 onAttr 值相等时，除此 td 以外其他 td 合并(**当 mergeClass 无有效值时才启用**)
});

示例效果

$('table').sdrowpan({
   onAttr: 'data-pid',         //tr 的属性名，两行数据中这个属性值相等时才进行合并
   mergeClass: 'doMerge'      //td 的类名，当 tr 的 onAttr 值相等时，此 td 进行合并 
});

上面调用代码效果截图显示：

再来看看换种调用方式：

$('table').sdrowpan({
   onAttr: 'data-pid',         //tr 的属性名，两行数据中这个属性值相等时才进行合并
   notMergeClass: 'notMerge'   //td 的类名，当 tr 的 onAttr 值相等时，除此 td 以外其他 td 合并(**当 mergeClass 无有效值时才启用**)
});

上面调用代码效果截图显示：

接下来是根据 table 相邻行的重复内容合并插件方法，推荐给大家参考

内容合并插件源码

$.fn.extend({
    //表格合并单元格，colIdx 要合并的列序号，从 0 开始
    "rowspan": function (colIdx) {
        return this.each(function () {
            var that;
            $('tr', this).each(function (row) {
                $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
                    if (that != null && $(this).html() == $(that).html()) {//$(this).attr('id') == $(that).attr('id')
                        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;
                    }
                });
            });
        });
    }
});

调用方法

function initLoad() {
    $("#process").rowspan(0);
    $("#process").rowspan(1);
}

需要那列内容就填写那列序号即可，默认从 0 开始

以上就是今天全部内容，内容来源网络收集，如果遇到本插件满足不了需求的情况，大家可以参考代码，根据代码处理逻辑修改出试用于自己需求的插件。