JS实现合并单元格的两种方法

最新推荐文章于 2024-01-20 10:41:43 发布
最新推荐文章于 2024-01-20 10:41:43 发布
阅读量6.5k 收藏 31
点赞数 4
文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45241359/article/details/115440628
版权 
本后端菜狗想在网上找合并单元格的代码，结果找到的都是太老的代码，然后就只能用Js手写了两种方法（第二种方法叫了个前端大佬写的）
废话不多说，直接上代码： （由于时间有点小久，就不写思路和过程啦）

第一种方法：
1.使用map扫描一遍表格，统计相同的信息数量（需要合并的个数），并标记每个重复的第一个元素
2.利用queue队列再扫描一遍表格，将不是第一个元素放入其中，最后讲队列元素全部出栈并删除元素。（这里不能用array数组存储删除的元素，因为删除会导致引用的下标不对）
3.扫描一遍表格，将第一个元素合并即可。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link href="/asserts/css/bootstrap.min.css" rel="stylesheet"> -->

    <!-- Custom styles for this template -->
    <!-- <link href="/asserts/css/dashboard.css" rel="stylesheet"> -->
</head>

<body>
    <table class="table table-striped table-sm">
        <thead>
            <tr>
                <th>交叉路口名称</th>
                <th>道路名称</th>
                <th>顺序</th>
                <th>路宽</th>
                <th>车道类型</th>
                <th>车道方向</th>
                <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;操作</th>
            </tr>
        </thead>
        <tbody>
            <tr class="order">
                <!-- <td rowspan="2" class="f1">环城南一路与骖鸾路交叉口</td> -->
                <td class="f1">环城南一路与骖鸾路交叉口</td>
                <td class="f1">兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>

            </tr>
            <tr class="order">
                <td class="f1">环城南一路与骖鸾路交叉口</td>
                <td class="f1">兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
            <tr class="order">
                <td class="f1">环城南一路与骖鸾路交叉口1</td>
                <td class="f1">兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
            <tr class="order">
                <td class="f1">环城南一路与骖鸾路交叉口1</td>
                <td class="f1">兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
            <tr class="order">
                <td class="f1">环城南一路与骖鸾路交叉口2</td>
                <td class="f1">兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
            <tr class="order">
                <td class="f1">环城南一路与骖鸾路交叉口2</td>
                <td class="f1">兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
            <tr class="order">
                <td class="f1">环城南一路与骖鸾路交叉口2</td>
                <td class="f1">兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
            <tr class="order">
                <td class="f1">环城南一路与骖鸾路交叉口2</td>
                <td class="f1">兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
            <tr class="order">
                <td class="f1">环城南一路与骖鸾路交叉口2</td>
                <td class="f1">兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
            <tr class="order">
                <td class="f1">环城南一路与骖鸾路交叉口2</td>
                <td class="f1">兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
        </tbody>
    </table>
    <script>
        setTimeout(function() {
            //初值
            var arr = document.getElementsByClassName("order");
            var arr1 = document.getElementsByClassName("f1");
            var queue1 = new Array();
            var map = new Map();



            //统计
            for (var i = 0; i < arr1.length; i++) {
                if (map.get(arr1[i].textContent) === undefined) {
                    arr1[i].classList.add("first")
                    map.set(arr1[i].textContent, 1); // 统计跨行的有多少，用一个 map 装着

                } else map.set(arr1[i].textContent, map.get(arr1[i].textContent) + 1);
            }


            for (let [key, value] of map) {
                console.log(key + " = " + value);
            }
            //删除
            for (var i = 0; i < arr1.length; i++) {
                if (arr1[i] === undefined) continue;
                if (!arr1[i].className.includes("first")) {
                    queue1.push(arr1[i]);
                }
            }
            console.log(queue1);
            while (queue1.length != 0) {
                var a = queue1.pop();
                a.remove();
                console.log(a);
            }
            // 合并
            for (var i = 0; i < arr.length; i++) {
                if (arr1[i] === undefined) continue;
                if (arr1[i].className.includes("first")) {
                    arr1[i].setAttribute('rowspan', map.get(arr1[i].textContent));
                    console.log(arr1[i].textContent + "合并");
                }
            }


        }, 0);
    </script>



</body>



</html>

结果：
在这里插入图片描述
在这里插入图片描述

第二种方法： 大佬写的就是不一样，一个For解决
1.扫描一遍表格，没有在arr数组找到的新元素就放入arr数组，如果在arr数组里找到了重复的元素，就把他隐藏掉，然后给第一个元素合并数+1即可。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            margin: 100px auto;
            border: 1px solid black;
            border-spacing: 0
        }
        
        td {
            border: 1px solid black;
            border-collapse: collpase;
        }
    </style>

</head>

<body>
    <table class="table table-striped table-sm">
        <thead>
            <tr>
                <th colspan="3">交叉路口名称</th>
                <th>道路名称</th>
                <th>顺序</th>
                <th>路宽</th>
                <th>车道类型</th>
                <th>车道方向</th>
                <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;操作</th>
            </tr>
        </thead>
        <tbody>
            <tr class="order">
                <td class="f1" colspan="3">环城南一路与骖鸾路交叉口</td>
                <td>兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>

            </tr>
            <tr class="order">
                <td class="f1" colspan="3">环城南一路与骖鸾路交叉口</td>
                <td>兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
            <tr class="order">
                <td class="f1" colspan="3">环城南一路与骖鸾路交叉口1</td>
                <td>兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
            <tr class="order">
                <td class="f1" colspan="3">环城南一路与骖鸾路交叉口1</td>
                <td>兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
            <tr class="order">
                <td class="f1" colspan="3">环城南一路与骖鸾路交叉口2</td>
                <td>兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
            <tr class="order">
                <td class="f1" colspan="3">环城南一路与骖鸾路交叉口2</td>
                <td>兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
            <tr class="order">
                <td class="f1" colspan="3">环城南一路与骖鸾路交叉口2</td>
                <td>兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
            <tr class="order">
                <td class="f1" colspan="3">环城南一路与骖鸾路交叉口2</td>
                <td>兴和路</td>
                <td>西南到东北</td>
                <td>3.596</td>
                <td>机动车道</td>
                <td>出口道</td>
            </tr>
        </tbody>
    </table>
    <script>
        //利用去重原理
        var arr = [];
        var f1 = document.getElementsByClassName("f1");
        for (let i = 0; i < f1.length; i++) {

            if (arr.indexOf(f1[i].innerHTML) == -1) {
                arr.push(f1[i].innerHTML);
                var index = i; //index是第一个元素
                document.getElementsByClassName("f1")[i].style.borderBottom = 0 + "px";
            } else {
                document.getElementsByClassName("f1")[i].style.display = "none"; //隐藏重复的元素
                document.getElementsByClassName("f1")[index].rowSpan += 1; //删去重复的元素,就给第一个元素的rowspan+1
            }
        }
        console.log(arr);
    </script>



</body>



</html>

结果：

在这里插入图片描述
在这里插入图片描述

结论：
使用本代码直接复制粘贴，给想合并的表格td元素加上f1类即可

浮光丶掠影
关注
  • 4
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
JS实现动态修改table及合并单元格的方法示例
10-20
主要介绍了JS实现动态修改table及合并单元格的方法,结合完整实例形式分析了JS动态遍历及修改table单元格的具体操作技巧,需要的朋友可以参考下
jquery 动态合并单元格的实现方法
11-22
////table中指定行第N列合并单元格(合并后会多出一列，删除N+1单元格即可) var tds = $("#dgList .TableHeader1").find('td'); tds[6].setAttribute("colSpan", "2"); 还可以写成：tds[6].attr("rowSpan", 2);
WEB-前端 表格标签-合并单元格
最新发布
三毛与海子的博客
01-20 1453
跨行合并，跨列合并
【岁月留声（Javascript）】动态合并table单元格
热门推荐
Kida 的技术小屋（CSDN 版）
05-11 1万+
废话不说直接上代码
element实现合并单元格通用方法
12-13
主要思路： 对数据进行处理，写了一个getSpanData通用方法。 用api中提供的span-method方法。 span-method方法用法： 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。 通用实例 demo.vue <el-table v-loading="lo
js实现自定义合并单元格，el-table开箱即用
sssdal19995的博客
04-02 2508
分享一个简单易用的计算表格内单元格合并的工具，支持行合并、列合并等常见场景
原生js合并单元格
dlbyysd的博客
07-12 1915
原生js简单封装合并单元格
java js合并_JS合并单元格
weixin_32791013的博客
02-19 382
在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代表合并所有行...
js 自定义表格的合并单元格、插入行列、删除行列
我见青山多妩媚,料青山见我应如是
09-09 2443
js 自定义表格的合并单元格、插入行列、删除行列
JavaScript合并单元格【解决只能根据单列进行合并的问题】
leader_li的博客
03-09 1073
该合并单元格的方法无法整齐的规划表格。由于每列只能根据该列的重复值进行合并，看着比较混乱。需要根据其他列进行分割合并。
JS 合并表格
qq_41834408的博客
12-12 1290
【代码】JS 合并表格。
怎么表格合并简单快速
ffcell2016的博客
10-10 86
今天跟大家分享一下怎么表格合并简单快速 1.打开演示文件要求将表格快速合并到一起 2.首先我们点击下图选项 3.点击【汇总拆分】选择【合并多表】 4.勾选全部工作表 5.将表头行数设置为2 6.勾选【合并后。标注源工作表】，最后点击【确定】即可完成 7.完成效果如下图 ...
使用SheetJS读写Excel文件
Naisu的各种笔记
12-30 8121
项目中有一个Excel转JSON的工具，之前这个工具一直使用 Python 的 openpyxl 库来编写的，然后使用 pyinstaller 打包成 .exe 文件。之前这个工具只是个命令行工具，不带界面的。现在项目升级，打算使用Web前端方式重写这个工具，调整部分功能并新增图形界面。这篇文章中将使用 SheetJS 来操作Excel文件，对相关操作进行简单记录。
js合并表格(行)
weixin_34235457的博客
06-13 859
2019独角兽企业重金招聘Python工程师标准>>> ...
28 Jupyter Notebook提示，技巧和捷径
cumei1658的博客
07-10 8369
This post is based on a post that originally appeared on Alex Rogozhnikov’s blog, ‘Brilliantly Wrong’. 这篇文章是基于最初出现在Alex Rogozhnikov的博客“ Brilliantly Wrong”上的 。 We have expanded the post and will cont...
js计算列表数据合并行
mengtoumingren的博客
12-03 541
计算各个列的合并数据，得到该数据后，再结合具体的前端框架调用进行合并。 /** * 计算合并行 * @param rows */ function calculateMergeCells(rows) { if (rows.length == 0) return; //初始化合并原始数据 var initData = JSON.parse(JSON.stringif
js实现表格动态合并
weixin_52776724的博客
03-09 1619
【代码】js实现表格动态合并。
JS前端合并单元格
前路漫漫，少年，继续披荆斩棘！
01-05 597
JS前端合并单元格
怎么实现合并单元格
06-02
在 Python 的 openpyxl 库中可以通过合并单元格的方式来美化 Excel 表格的样式。下面是一个简单的例子： ``` python from openpyxl import Workbook from openpyxl.utils import get_column_letter from openpyxl.styles import Alignment from openpyxl.worksheet.dimensions import ColumnDimension # 创建一个新的工作簿 wb = Workbook() ws = wb.active # 合并单元格 ws.merge_cells('A1:C3') # 在合并的单元格中填写数据 ws['A1'] = 'Merged Cells' # 设置合并后的单元格的对齐方式为居中对齐 ws['A1'].alignment = Alignment(horizontal='center', vertical='center') # 设置合并后的单元格的列宽和行高 for col_idx in range(1, 4): col_letter = get_column_letter(col_idx) column_dim = ws.column_dimensions[col_letter] column_dim.width = 20 for row_idx in range(1, 4): row_dim = ws.row_dimensions[row_idx] row_dim.height = 30 # 保存工作簿 wb.save('merged_cells.xlsx') ``` 上述代码中，我们创建了一个新的工作簿，并在第一个工作表中合并了 A1 到 C3 这个范围内的单元格，然后在合并的单元格中填写了数据，并设置了单元格的对齐方式为居中对齐。最后，我们设置了合并后的单元格的列宽和行高，并将工作簿保存到本地文件中。 需要注意的是，openpyxl 库需要手动安装。可以使用 pip 命令来安装： ``` pip install openpyxl ``` 希望这个例子能够帮助你实现合并单元格的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值