html5 合并行列属性,jQuery小插件实现table表格行列合并

最近在做项目时候，需求要求实现对表格中单元格列合并的功能，如果是只在某一列中进行合并操作，代码是遍历每行的某一列单元格，而这次的需求比较复杂，列数很多，都可以动态显示隐藏，原来的代码功能明显不够用了。

本插件主要用于表格单元格的纵向合并，前提，每行的tr里都有一个属性，比如data-pid,当上下行数据的这个属性值相等时，将一列或者多列的单元格纵向，用class标识需要合并的列。有的情况下，是只有少数列不合并，因此也支持用class标识不需要合并列。

HTML代码

title1title2title3title4title5title6

content1-1content1-2content1-3content1-4content1-5content1-6content2-1content2-2content2-3content2-4content2-5content2-6content3-1content3-2content3-3content3-4content3-5content3-6content4-1content4-2content4-3content4-4content4-5content4-6content5-1content5-2content5-3content5-4content5-5content5-6

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);

参数表

参数名

默认值

功能

onAttr

undefined

tr的属性名，两行数据中这个属性值相等时才进行合并

mergeClass

undefined

td的类名，当tr的onAttr值相等时，此td进行合并

notMergeClass

undefined

td的类名，当tr的onAttr值相等时，除此td以外其他td合并(当mergeClass无有效值时才启用)

调用方法

//调用实例 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开始

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