web前端开发个人技术博客
当前位置: 免费资源 > jQuery小插件实现table表格行列合并

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

2018-08-16 分类:免费资源 作者:码云 阅读(158)

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

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<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代码

1
2
3
4
5
6
7
8
9
table {
    border-collapse: collapse !important;
}

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

插件源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
(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无有效值时才启用)

调用方法

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

示例效果

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

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

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

再来看看换种调用方式:

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

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

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

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

内容合并插件源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$.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 &amp;&amp; $(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;
                    }
                });
            });
        });
    }
});

调用方法

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

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

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

「如果觉得我的文章对您有用,请帮助本站成长」

赞(3) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
3

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - jQuery小插件实现table表格行列合并

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

圈子

关注微信公众号
关注微信公众号

精彩评论

服务热线:
 13888888888

 QQ在线交流