算法前端table单元格首列相同则进行单元格合并

最新推荐文章于 2024-03-31 18:45:27 发布

蔚蓝Cure

最新推荐文章于 2024-03-31 18:45:27 发布

阅读量689

点赞数

分类专栏： JavaScript篇文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43569862/article/details/106097020

版权

本文介绍了一种需求，即当表格中首列内容相同时，如何自动合并单元格。作者分享了自己的算法思路，提供了全Demo代码，并指出该算法仅适用于首列相同数据整体出现的情况，对于离散数据则需要进行额外处理。

摘要由CSDN通过智能技术生成

最近遇到一个需求，需要把
在这里插入图片描述
这种单元格的首列相同内容进行自动合并，合并成以下样子

个人是觉得假设以后表格增加个编号什么的，合并成这个样子不是丑的一匹，当然了，本来实现需求的原则，参考了一下页面排版，整合了以下算法
算法如下

      // 页面中table中的第一列td标签(我给首行的首个td增加了一个类名叫a)
      var a = document.querySelectorAll('.a')
      // 页面中所有的行（我给table中每个td都增加了类型叫aoe）
      var aoe = document.querySelectorAll('.aoe')
      // item1存放总共多少种字符类型
      var item1 = []
      // item2存放每种字符类型所在的位置
      var item2 = []
      // 循环a拿到页面中首列的文字，添加在item1里
      a.forEach(function (item,index) {
   
        item1.push(item.innerText)
      })
      // item1去重（可以得到页面首列有几种不一样的字符类型名） 并转换成数组
      var arr = Array.from(new Set(item1))
      // 检索独特字符类型名所在的页面的第几行，存在item2中
      arr.forEach(function (item,index) {
   
        item2.push(item1.indexOf(item))
      })
      // 移除第一列
     aoe.forEach(function (item,index) {
   
       item.children[0].remove()
     })
     // 创造新的第一列渲染在对应位置
     arr.forEach(function (item,index) {
   
       var td = document.createElement('td')
       td.innerText = arr[index]
       td.colSpan = 2
       
       if (index === arr.length - 1) {
   
         td.rowSpan = a.length - 1 -item2