js实现表格动态合并

// table的id  需要合并的列(从0开始算)
    mergeCell(tableId, cols) {
      const table = document.getElementById(tableId);
      if (!table)return
      const 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.classList.add('remove');
            // 递归判断当前对象时候已经被删除
            this.setParentSpan(table, i, v);
          }
        }
      })
      let removeTds = document.getElementsByClassName('remove');
      for (let i = removeTds.length-1; i >= 0; i--) {
        let eldTd = removeTds[i];
        eldTd.parentNode.removeChild(eldTd);
      }
    }
    
    setParentSpan(table, row, col) {
      const col_item = table.rows[row].cells[col];
      if (col_item.classList.contains('remove')) {
        this.setParentSpan(table, --row, col)
      } else {
        col_item.rowSpan += 1;
      }
    }
// 使用,合并id为table1的第一列数据,相同的合并
mergeCell("table1", [0])

运行效果:
在这里插入图片描述

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 如果你想要实现 html 表格动态合并,可以考虑使用 JavaScript 或 jQuery 实现。以下是一个简单的示例: HTML 代码: ```html <table id="myTable"> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> </tr> <tr> <td rowspan="3">张三</td> <td>语文</td> <td>90</td> </tr> <tr> <td>数学</td> <td>85</td> </tr> <tr> <td>英语</td> <td>92</td> </tr> <tr> <td>李四</td> <td>语文</td> <td>88</td> </tr> <tr> <td>王五</td> <td>语文</td> <td>92</td> </tr> </table> ``` JavaScript 代码: ```javascript $(document).ready(function() { // 获取表格中的单元格 var cells = document.getElementsByTagName('td'); // 遍历单元格,查找需要合并的单元格 for (var i = 0; i < cells.length; i++) { var rowspan = cells[i].getAttribute('rowspan'); if (rowspan) { rowspan = parseInt(rowspan); var nextRow = cells[i].parentNode.nextSibling; while (nextRow && nextRow.nodeType != 1) { nextRow = nextRow.nextSibling; } if (nextRow) { var cellToExtend = nextRow.getElementsByTagName('td')[i]; cellToExtend.setAttribute('rowspan', rowspan - 1); } } } }); ``` 这段代码使用了 jQuery 库来方便地获取表格中的单元格,然后遍历单元格,查找需要合并的单元格并进行合并。具体来说,对于每个具有 `rowspan` 属性的单元格,它会获取该属性的值并将其转换为整数,然后查找下一行相同列数的单元格,并将其 `rowspan` 属性的值减 1。这样就实现动态合并表格的效果。 ### 回答2: 在HTML中,可以通过使用rowspan和colspan属性来实现表格动态合并。 rowspan属性用于合并行,它指定了一个单元格跨越的行数。例如,如果我们想要将一个单元格合并到它下面的两行中,可以在这个单元格中添加rowspan="2"属性。 colspan属性用于合并列,它指定了一个单元格跨越的列数。例如,如果我们想要将一个单元格合并到它右边的三列中,可以在这个单元格中添加colspan="3"属性。 下面是一个示例,演示如何使用rowspan和colspan属性来合并表格中的单元格。 ``` <table> <tr> <td rowspan="2">合并行</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td colspan="2">合并列</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </table> ``` 在上面的示例中,第一个单元格跨越了两行,并且第三个单元格跨越了两列。 通过这种方式,我们可以根据需要动态合并表格中的单元格,使表格更加清晰和紧凑。 ### 回答3: 在HTML中,可以使用colspan和rowspan属性来实现表格动态合并。 colspan属性用于将一个单元格水平合并多个单元格。例如,如果我们想要将第一行的两个单元格合并成一个,可以将第一个单元格的colspan属性设置为2。 rowspan属性用于将一个单元格垂直合并多个单元格。例如,如果我们想要将第一列的两个单元格合并成一个,可以将第一个单元格的rowspan属性设置为2。 下面是一个示例代码: ```html <table> <tr> <th colspan="2">表头</th> <th>表头</th> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td rowspan="2">单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> </tr> </table> ``` 在这个例子中,第一行的第一个单元格使用了colspan="2"属性,合并了两个单元格;第一列的第一个单元格使用了rowspan="2"属性,合并了两个单元格。 使用这样的属性组合,我们可以实现不同方式的动态表格合并,使表格更加灵活多样。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值