js竖列合并单元格

最新推荐文章于 2025-06-18 11:56:06 发布
原创 最新推荐文章于 2025-06-18 11:56:06 发布 · 1.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #合并单元格

本文介绍了一个JavaScript实现的合并单元格插件方法，通过fnMergeRowCell(arg0, arg1)函数，可以实现表格中指定列或前几列的竖向合并。示例中arg0参数为tbody元素，arg1参数支持两种写法：指定列合并如[0,1,2]，或前几列合并如4。" 137509230,22955285,Docker部署Nginx实战：从基础镜像到配置管理,"['docker', 'nginx', '容器', '部署']

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近有一个合并单元格任务，需要写一个插件式的方法。马上上代码。

<!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    </head>
    <style>
        .center {
            vertical-align: middle !important;
        }
    </style>

    <body class="hastop body-pic body-wihte qjd_qjd">

        <div class="container">
            <div class="table-responsive">
                <table cellspacing="0" id="group-test" class="table table-small-font table-bordered table-striped">
                    <thead>
                        <tr>
                            <th data-priority="1">部门</th>
                            <th data-priority="1">区域</th>
                            <th data-priority="1">姓名</th>
                            <th data-priority="3">产品</th>
                            <th data-priority="3">销售额</th>
                        </tr>
                    </thead>

                    <tbody name="maintbody">
                        <tr>
                            <td>渠道业务部</td>
                            <td>华东区域</td>
                            <td>张三</td>
                            <td>奶粉A</td>
                            <td>6662990.12</td>
                        </tr>
                        <tr>
                            <td>渠道业务部</td>
                            <td>华东区域</td>
                            <td>张三</td>
                            <td>奶粉B</td>
                            <td>6662990.12</td>
                        </tr>
                        <tr>
                            <td>渠道业务部</td>
                            <td>华东区域</td>
                            <td>张三</td>
                            <td>奶粉C</td>
                            <td>6662990.12</td>
                        </tr>

                        <tr>
                            <td>渠道业务部</td>
                            <td>华北区域</td>
                            <td>王五</td>
                            <td>奶粉A</td>
                            <td>6662990.12</td>
                        </tr>
                        <tr>
                            <td>渠道业务部</td>
                            <td>华北区域</td>
                            <td>王五</td>
                            <td>奶粉B</td>
                            <td>6662990.12</td>
                        </tr>
                        <tr>
                            <td>渠道业务部</td>
                            <td>西北区域</td>
                            <td>王五</td>
                            <td>奶粉C</td>
                            <td>6662990.12</td>
                        </tr>

                        <tr>
                            <td>渠道业务部</td>
                            <td>西北区域</td>
                            <td>李四</td>
                            <td>奶粉A</td>
                            <td>6662990.12</td>
                        </tr>
                        <tr>
                            <td>渠道业务部</td>
                            <td>西北区域</td>
                            <td>李四</td>
                            <td>奶粉B</td>
                            <td>6662990.12</td>
                        </tr>
                        <tr>
                            <td>渠道业务部</td>
                            <td>华北区域</td>
                            <td>李四</td>
                            <td>奶粉C</td>
                            <td>6662990.12</td>
                        </tr>

                    </tbody>
                </table>
            </div>

        </div>
        <script type="application/javascript">
            var fnMergeRowCell = function(maintbodyObj, limitRowOrRowIndexs) {
                var limitRow = null //从0~n列
                var limitRowIndex = null; //具体限制某列，如[0,4,5]

                if(limitRowOrRowIndexs == undefined || limitRowOrRowIndexs == null) {
                    limitRow = null;
                    limitRowIndex = null;
                } else {
                    if($.isArray(limitRowOrRowIndexs)) {
                        limitRowIndex = limitRowOrRowIndexs;
                        limitRow = null;
                    } else {
                        limitRowIndex = null;
                        limitRow = limitRowOrRowIndexs;
                    }
                }

                /**
                 * 名称说明
                 * 1. 主合并对象：设置rowspan的td
                 * 2. 子合并对象：被隐藏的td
                 * 
                 * 实现原理
                 * 1. 每行扫描，拿当前行和下一行做对比，如果值为一致，标记为主合并对象（在标记前要判断是否为主标记对象，如果为子标记对对象进行data-ishide 标记 ），
                 * 2. 下一行自动标记上主合并对象的 data-pid
                 */

                var callAttr = "data-main";
                var dataPidKey = "data-cid";
                var $tbody = $(maintbodyObj);
                var trs = $tbody.find("tr");

                for(var i = 0; i < trs.length; i++) {
                    var $cr = $(trs[i]);
                    var $nr = $(trs[i + 1]);

                    var $crtd = $cr.find("td"); //当前行下面的td
                    var $nrtd = $nr.find("td"); //下一行下面的td

                    if(limitRow == null) {
                        limitRow = $crtd.length;
                    }

                    for(var r = 0; r < limitRow; r++) {
                        if(null != limitRowIndex) {
                            if(limitRowIndex.indexOf(r) == -1) {
                                continue;
                            }
                        }

                        var $crtdRow = $($crtd[r]);
                        var $nrtdRow = $($nrtd[r]);

                        //当前行对应的单元格的值 和 下一行对应的单元格的值相同
                        if($crtdRow.html() == $nrtdRow.html()) {

                            var dataId = $crtdRow.attr(dataPidKey);
                            //如果为隐藏，则代表着这个已经是被合并的了，需要拿到data-pid
                            if($crtdRow.attr(callAttr) != "false") {
                                dataId = "coordinate_" + i + "_" + r;
                                $crtdRow.attr(callAttr, "true").attr(dataPidKey, dataId); //标记主要主合并对象
                            }
                            $nrtdRow.attr(callAttr, "false").attr(dataPidKey, dataId);
                            $nrtdRow.hide();
                        }
                    }
                }

                $tbody.find("[" + callAttr + "=true]").each(function(i, _d) {
                    var dataPid = $(_d).attr(dataPidKey);
                    $(_d).attr("rowspan", $tbody.find("[" + dataPidKey + "=" + dataPid + "]").length).addClass("center");
                });
            }

            fnMergeRowCell($("[name=maintbody]"), [0, 1, 2]);
        </script>
    </body>

</html>

运行效果如下：
运行效果

fnMergeRowCell（arg0, arg1）
arg0：table 中的 tbody。
arg1：支持指定某列需要合并（写法：[0,1,2]），支持前几列需要合并（写法：4）；

java js合并_JS合并单元格
weixin_32791013的博客
02-19 511
在Web中经常需要合并单元格，例如对于下面一个表格:table,table tr th,table tr td {border: 1px solid #0094ff;}表头1表头2表头3表头4列1列2列3列4列1列2列3列4列1列2列3列4表格原来样式:合并的JS方法:(可以作为一个工具方法)1、纵向合并，也就是对同一列的相邻行单元格相同的进行合并/*** 合并单元格(如果结束行传0代表合并所有行...
xlsx-js-style导出Excel，带样式合并单元格边框显示不全和动态插入表头 解决
09-27
xlsx-js-style库在使用纯JavaScript进行Excel导出方面提供了强大的功能，不仅处理了合并单元格的显示问题，还支持动态表头的插入，并允许对导出的Excel文件样式进行自定义。这为开发人员提供了一种灵活、高效的解决...
js 合并单元格
11-12
js 合并单元格 只有一个方法 思路清晰 可直接使用 注：此方法为合并某一列的单元格 若合并其他 可在吃方法基础上修改
JavaScript合并两个列表到目标列表，并且进行排序，数组合并、集合合并、列表合并、list合并
最新发布
BillKu的博客
06-18 260
console.log("降序:", resultDesc);// 降序: [10, 8, 7, 4, 3, 2]console.log("升序:", result);// 升序: [2, 3, 4, 7, 8, 10]// 输出: [1, 2, 3, 4, 5, 6]若数组合并后非常大，可考虑高效排序算法（如归并排序），但原生。会修改原数组，若需保留原数组，先复制再排序（如使用展开语法。排序：现代JS引擎（V8）使用Timsort，平均复杂度。均可安全合并数组（不改变原数组）。// 合并并排序（升序）
js合并单元格
对雪书空武
10-26 350
&#13; uniteTable(tb,colLength){ document.getElmentById('mytable').style.display='block'; var i = 0; var j=0; var rowCount = tb.rows.length;//行数 var colCount = tb.rows[0].cells.leng...
使用JS合并单元格
欧程部落
07-04 2475
使用JS合并单元格    表格中经常会有不规则的表格出现，收集了点网上写的合并单元格的js代码，感觉可以扩展，于是就试着扩展了一下， 不过只能合并表格中的数据时有规律的数据，不能进行任意合并。    下面是些写的脚本代码     Js代码    ///////////////////////////////////////////////
JS实现动态修改table及合并单元格的方法示例
10-20
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...
列表多行多列合并单元格
05-12
在Web开发中，尤其是构建数据报表时，列表多行多列合并单元格是一个常见的需求。这通常涉及到HTML、CSS和JavaScript技术的综合运用，尤其是在使用表格（table）元素展示数据时。下面将详细讲解如何实现这个功能。 ...
layui table合并单元格.zip
01-06
另外，"2layui数据表格跨行自动合并 - 合并行.url" 和 "3layui 动态表格之合并单元格 - 合并列.url" 很可能是指向相关教程或示例的链接，分别指导如何实现跨行和跨列的合并。在跨列合并中，可能涉及到对每个单元格的...
jquery datatable 单元格合并
04-26
通过Datatables的`drawCallback`或`initComplete`事件，在表格渲染完成后合并单元格。遍历预处理得到的合并信息，使用DOM操作修改表格结构。 ```javascript $('#example').DataTable({ // ...其他配置... ...
javascript合并单元格
11-26
js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格
表格行列合并JS
01-09
//函数说明：合并指定表格（表格id为_w_table_id）指定列（列数为_w_table_colnum）的相同文本的相邻单元格 //参数说明：_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data //参数说明：_w_table_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。 //函数说明：合并指定表格（表格id为_w_table_id）指定行（行数为_w_table_rownum）的相同文本的相邻单元格 //参数说明：_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ，此参数应为 #data //参数说明：_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。 // 如果为数字，则从最左边第一行为1开始算起。 // "even" 表示偶数行 // "odd" 表示奇数行 // "3n+1" 表示的行数为1、4、7、10....... //参数说明：_w_table_maxcolnum 为指定行中单元格对应的最大列数，列数大于这个数值的单元格将不进行比较合并。 // 此参数可以为空，为空则指定行的所有单元格要进行比较合并。
JS合并单元格、JavaScript单元格合并
wangxiaohigh
11-09 606
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;title&gt;合并表格&lt;/title&gt; &lt;script&gt; /////////////////////////
Javascript实现合并单元格
weixin_30521161的博客
07-29 211
　　Web上的报表或表格应用，较为复杂的表格操作一般都比较难实现，这里介绍一下用ComponentOne Studio for ASP.NET Wijmo中的SpreadJS，可以实现一些较为复杂的表格操作，个人认为他模仿桌面应用的操作体验非常不错，虽然我并不建议所有Web应用都去照搬桌面应用的交互，照搬桌面交互其实无助于Web应用体验的创新，但是办公应用没办法，谁叫甲方是老大呢。。。 　　接下...
JS合并单元格
℡メ㏑╭ァ小凯
06-20 370
转自：https://www.cnblogs.com/qlqwjy/p/9048317.html 核心代码 /** * 合并单元格(如果结束行传0代表合并所有行) * @param table1 表格的ID * @param startRow 起始行 * @param endRow 结束行 * @param col 合并的列号，对第几列进行合并(从0.
JS合并单元格。
79bo的专栏
06-02 3469
                         A             1                                 A             2                                 B             1                                 B             1                
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值