JS实现合并单元格的两种方法
2024-05-14 10:38:50
本后端菜狗想在网上找合并单元格的代码，结果找到的都是太老的代码，然后就只能用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> 操作</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> 操作</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类即可
JS实现合并单元格的两种方法相关推荐
- 纵向合并gridview单元格的两种方法
比如说有这样一组数据用gridview展示出来是这样 name num a 0 a 1 a 2 a 3 a 4 b 5 b 6 b 7 b 8 b 9 b 10 但想把相同的name放在一个单元格里, ...
- jxls导出excel，合并单元格的两种方式
1.引入maven依赖: <dependency><groupId>org.projectlombok</groupId><artifactId>lom ...
- Office Excel阅读模式(记忆和高亮选中的单元格)的两种方法
金山WPS上非常好用的阅读模式,到了微软Office上就就没有了,很是心痛. 然而网上搜到的Office阅读模式,要么需要用到插件(比如"方方格子"的"聚光灯" ...
- 删除单元格_VBA（实验1）用VBA 删除某列空单元格的3种方法：删除法，转移到其他列方法，数组方法...
1 要解决的问题:删除某列中的空单元格/空行 暂时只实现了删除一列中的空行,并没有实现多行的判断空行和删除方法.----之后再做更复杂的 1.1 需求分析 用VBA删除如下内容,解决思路都不同 删除1 ...
- html+input改变图标,JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 将小图标当做input的背景来插入,直接上代码吧: Box{ height: 50px; backgroun ...
- html统计表合并单元格的快捷键,excel中合并单元格的快捷键的方法及设置技巧
快捷键的熟练使用可以帮助我们在工作中提高效率,接下来为您讲解合并单元格的快捷键设置方法的图文演示 合并单元格在excel默认的情况下是没有快捷键的. 需要用以下方法设置 1.打开excel,选择工具- ...
- 合并BIN文件的两种方法
合并BIN文件的两种方法 在单片机的开发过程中,经常需要将两个单独的BIN文件合并成一个文件,方便烧写和生产.下面结合STM32的IAP Bootloader Code和Application Cod ...
- 多个PDF文件如何合并成一个？两种方法轻松get
在日常学习生活中,如果你需要将多个文档整合为一个完整的文件,比如说多篇文章.多张图片.多个表格等等,这时候就需要将这些文档合并成一个PDF文件.如何将多个PDF文件如何合并成一个?两种方法轻松帮你搞定 ...
- js获取classname值_利用js获取元素class值的两种方法
我们有时为了达到某种效果,需要以元素的class值为条件做判断. 我们如何利用JavaScript获取元素class的值?我们先看下面代码: x=document.getElementsByTagNa ...
最新文章
- java中数组属于哪种类型_在Java中，关于数组描述正确的是
- linux 高性能服务排查方式
- 程序员除了上班，还可以怎么赚钱?
- 基于深度学习的目标检测发展历程:deep_learning_object_detection
- 【java笔记】ArrayList类的使用
- java ajaxsubmit_jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
- 计算机信息检索工作的原理,2021年湖北自考计算机信息检索课程考试大纲
- matlab积分器的工作原理,Simulink积分器详解（图）
- 谷歌Gmail账号注册方法分享 目前简单有效
- 计算机右键管理提示没有关联应用,win10系统计算机右键管理提示没有与之关联的程序的解决方法...
- 联想2022拯救者Y9000P和Y7000P选哪个好
- mysql下载64位 太平洋,Win10 64位安装MySQL5.6.35的详细教程
- Tornado笔记——用Tornado搭建假单统计考勤系统（九）
- Python解甲乙猜数问题
- python微服务架构设计模式_微服务架构设计模式 PDF 电子书 百度云 网盘下载
- 天猫店铺基础知识分享
- 一篇理解GFS与HDFS的重要理念
- smartfroms word编辑_请教Microsoft Office Word 2007 SmartArt图形文本如何直接在里面添加字，修改字。如图。...
- 好男儿志在四方，投笔从戎报效祖国！
- IEEE PHM 2012挑战赛的轴承数据集及预处理程序（MATLAB代码）