企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

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

JavaScript笔记 码云 60℃ 0评论
目录
[隐藏]

最近在做项目时候,需求要求实现对表格中单元格列合并的功能,如果是只在某一列中进行合并操作,代码是遍历每行的某一列单元格,而这次的需求比较复杂,列数很多,都可以动态显示隐藏,原来的代码功能明显不够用了。
本插件主要用于表格单元格的纵向合并,前提,每行的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);

参数表

参数名 默认值 功能
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进行合并 
});

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

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

再来看看换种调用方式:

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

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

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

接下来是根据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开始

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

转载请注明:码云笔记 » jQuery小插件实现table表格行列合并

喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址