用最简的代码和例子演示如何使用jQuery进行单元格合并

最新推荐文章于 2023-07-24 17:37:03 发布

lhtzbj12

最新推荐文章于 2023-07-24 17:37:03 发布

阅读量1.5k

点赞数 2

分类专栏： jQuery 文章标签： jquery 合并表格单元格插件

本文链接：https://blog.csdn.net/lhtzbj12/article/details/54577656

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言

这几天的项目再次应用到了表格中单元格合并的功能，之前的有个项目是只在某一列中进行合并操作，因此代码是遍历每行的某一列单元格，而这次的需求比较复杂，列数很多，都可以动态显示隐藏，原来的代码功能明显不够用了，因此花了点时间，好好整理整理，才有了下面的用于表格单元格合并的插件。
本插件主要用于表格单元格的纵向合并，前提，每行的tr里都有一个属性，比如data-pid,当上下行数据的这个属性值相等时，将一列或者多列的单元格纵向，用class标识需要合并的列。有的情况下，是只有少数列不合并，因此也支持用class标识不需要合并列。
如果遇到本插件满足不了需求的情况，大家可以参考代码，根据代码处理逻辑修改出试用于自己需求的插件。

插件源码

//js文件
/**********************************************
 * Copyright (C) Corporation. All rights reserved.
 * 
 * Author      :  lihaitao 
 * Email        : lhtzbj12@126.com
 * Create Date  : 2016-12-26
 * Description  : 表格单元格合并插件
 * Version      : V1.0
 *          
 * Revision History:
 *      Date         Author               Description
 *      2016-12-26   lihaitao               create
 *  
***********************************************
//调用实例 table 为页面里的表格
$('table').sdrowpan({
    onAttr: 'data-pid',         //tr的属性名，两行数据中这个属性值相等时才进行合并
    mergeClass: 'doMerge',      //td的类名，当tr的onAttr值相等时，此td进行合并
    notMergeClass: 'notMerge'   //td的类名，当tr的onAttr值相等时，除此td以外其他td合并(**当mergeClass无有效值时才启用**)
});
*/
(function ($) {
    $.fn.sdrowpan = 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无有效值时才启用)

示例程序源码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- 这里路径需要改成实际路径 -->
    <script src="jquery.sdrowspan.js"></script>
    <style>
        table {  border-collapse: collapse !important; }
        th, td {  border: 1px solid #999;    padding: 10px 20px;  }
    </style>    
</head>
<body>
    <table>
        <thead>
            <tr><th>标题1</th><th>标题2</th><th>标题3</th><th>标题4</th><th>标题5</th><th>标题5</th></tr>
        </thead>
        <tbody>
            <tr data-pid="0"><td class="doMerge">值1-1</td><td class="doMerge">值1-2</td><td>值1-3</td><td class="notMerge">值1-4</td><td>值1-5</td><td>值1-6</td></tr>
            <tr data-pid="0"><td class="doMerge">值2-1</td><td class="doMerge">值2-2</td><td>值2-3</td><td class="notMerge">值2-4</td><td>值2-5</td><td>值2-6</td></tr>
            <tr data-pid="1"><td class="doMerge">值3-1</td><td class="doMerge">值3-2</td><td>值3-3</td><td class="notMerge">值3-4</td><td>值3-5</td><td>值3-6</td></tr>
            <tr data-pid="1"><td class="doMerge">值4-1</td><td class="doMerge">值4-2</td><td>值4-3</td><td class="notMerge">值4-4</td><td>值4-5</td><td>值4-6</td></tr>
            <tr data-pid="2"><td class="doMerge">值5-1</td><td class="doMerge">值5-2</td><td>值5-3</td><td class="notMerge">值5-4</td><td>值5-5</td><td>值5-6</td></tr>
        </tbody>
    </table>
    <script>
        $(function () {
            $('table').sdrowpan({
                onAttr: 'data-pid',         //tr的属性名，两行数据中这个属性值相等时才进行合并
                mergeClass: 'doMerge',      //td的类名，当tr的onAttr值相等时，此td进行合并
                notMergeClass: 'notMerge'   //td的类名，当tr的onAttr值相等时，除此td以外其他td合并(**当mergeClass无有效值时才启用**)
            });
        });        
    </script>
</body>
</html>

示例程序截图

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

上面代码执行的效果如下：
使用doMerge

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

上面代码执行的效果如下
使用notMerge