JS合并相同单元格

实现思路:
1、找出需要合并的列(col)
2、遍历table中的每一行(tr)。结合列数(col)。进行遍历每一行的tr
3、判断当前tr和下一行的tr是否相同,如果相同,那么为下一行的tr添加一个class。方便后续删除
4、为当前重复的第一项tr添加rowspan属性
5、删除带有标记的tr

以下是完整的JS代码


  // table的id  需要合并的列(从0开始算)
  function mergeCell(tableId, cols) {
    var table = document.getElementById(tableId);
    var table_rows = table.rows;
    // 需要合并的列的数组
    cols.forEach((v, k) => {
      // 循环table每一行
      for (let i = 0; i < table_rows.length - 1; i++) {
        // row
        let now_row = table_rows[i];
        let next_row = table_rows[i + 1];

        // col
        let now_col = now_row.cells[v];
        let next_col = next_row.cells[v];

        if (now_col.innerHTML == next_col.innerHTML) {
          // 标记为需要删除
          $(next_col).addClass('remove');
          // 递归判断当前对象时候已经被删除
          setParentSpan(table, i, v);
        }
      }
    })
    $(".remove").remove();
  }

  // (递归方法,用于多行统计) pram => table表格 当前行 对应的列 
  function setParentSpan(table, row, col) {
    var col_item = table.rows[row].cells[col];
    if ($(col_item).hasClass('remove')) {
      setParentSpan(table, --row, col)
    } else {
      col_item.rowSpan += 1;
    }
  }

  // 合并单元格(合并第1、2、3、6、7、8)列
   mergeCell('order_table', [0, 1]);

html则为普通的tr td表格(略)

为什么会有一个递归方法?

假设现在有3行的数据是相同的,即需要合并单元格

步骤1:遍历第一行,发现与第二行的数据相同,第二行数据被标记删除,第一行的rowspan+1

步骤2:遍历第二行,发现第二行数据和第三行数据相同,第三行数据被标记需要删除,与此同时,第二行的rowspan+1

那么等到删除数据的时候,其实第二行已经被删除。rowspan并不起作用,我们在遍历第二行的时候的rowspan其实需要加到第一行上(即没有被标记的行)。

那么就需要向上遍历。直到找到没有被标记的行进行rowspan+1。

所以就有了现在的递归方法

合并前:
《JS合并相同单元格》

合并后:
《JS合并相同单元格》

因为我在JS中,只控制了合并第1和2行。因为数组是从0开始的,所以在方法中传入的数组是[0,1]

合并单元格的JS就到这里了

**THE END**
    原文作者:Jioho_
    原文地址: https://blog.csdn.net/Jioho_chen/article/details/84593753
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞