JS合并相同单元格

文章目录

  • JS合并相同单元格
    • 基本思路
    • 实例源码

JS合并相同单元格

参考:https://blog.csdn.net/Jioho_chen/article/details/84593753

基本思路

1、通过传值确定要合并的列cols
2、遍历table中的每一行tr,进行指定列数合并
3、判断当前tr和下一行的dr是否相同,如果相同,那么为下一行的tr添加一个class,方便后续删除
4、为当前重复的第一项tr添加rowspan属性
5、删除带有标记的tr`

实例源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <title>Document</title>
</head>
<body>
  <table id="order_table">
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
      <td>数据4</td>
      <td>数据5</td>
    </tr>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
      <td>数据4</td>
      <td>数据5</td>
    </tr>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
      <td>数据4</td>
      <td>数据5</td>
    </tr>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
      <td>数据4</td>
      <td>数据5</td>
    </tr>
  </table>
  <script>
    /**
     * @param tableId  table的id
     * @param cols     需要合并的列
    */
    function mergeCell(tableId, cols) {
      var table = document.getElementById(tableId);
      var table_rows = table.rows;
      cols.forEach( v => { // 需要合并的列的数组
        for (let i = 0; i < table_rows.length - 1; i++) { // 循环table每一行
          // 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'); // 标记为需要删除的列dom
            setParentSpan(table, i, v);
          }
        }
      })
      $(".remove").remove();
    }

    /**
     * @param table  table的dom
     * @param row    内容相同行
     * @param col    内容相同列
    */
    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;
      }
    }
    // 合并单元格(0、1、2、3 表示需要合并的列)
    mergeCell('order_table', [0, 1]);
  </script>
</body>
</html>

你可能感兴趣的:(javascript,html,前端)