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

Bertha 。 2021-09-11 06:14 392阅读 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);

# 输入参数 #

## 参数表 ##

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>默认值</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onAttr</td> 
   <td>undefined</td> 
   <td>tr的属性名，两行数据中这个属性值相等时才进行合并</td> 
  </tr> 
  <tr> 
   <td>mergeClass</td> 
   <td>undefined</td> 
   <td>td的类名，当tr的onAttr值相等时，此td进行合并</td> 
  </tr> 
  <tr> 
   <td>notMergeClass</td> 
   <td>undefined</td> 
   <td>td的类名，当tr的onAttr值相等时，除此td以外其他td合并(<strong>当mergeClass无有效值时才启用</strong>)</td> 
  </tr> 
 </tbody> 
</table>

# 示例程序源码 #

<!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][doMerge]

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

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

[doMerge]: /images/20210809/ff04524172e94f259510eccac5ae1861.png
[notMerge]: /images/20210809/6a42a4a748044328ba75c2d44919f649.png