如何通过jQuery/JavaScript实现HTML表格同值单元格合并

原有代码问题 #

• 未初始化last_selected_compNo变量，首次判断逻辑直接失效
• 通过拆分整行文本取目标值的方式容错性极差，单元格内容带空格、换行、特殊字符时会取错字段
• 全局查找同内容单元格的逻辑会误命中其他列、其他不连续行的同值单元格，无法保证仅合并连续行
• 硬编码索引判断删除单元格，仅适配固定单一场景，不支持多列合并，动态数据下完全不通用
• 未考虑删除单元格后导致的列索引偏移问题，合并多列时会出现单元格错位

核心实现逻辑 #

因为表格结构固定，按列处理纵向合并即可，核心规则如下：

• 处理列的顺序从右往左，避免先处理左列时删除单元格导致右列的索引错位
• 每列单独遍历，记录当前连续同值段的第一个单元格作为基准
• 逐行对比当前行对应列的单元格内容，和基准值一致时，给基准单元格的rowspan属性加1，同时删除当前行的重复单元格
• 遇到值不一致的单元格时，重置基准为当前单元格，重新开始计数
• 对比单元格内容时默认去除首尾空格，避免格式字符导致的判断误差

可直接复用的代码 #

/**
 * 合并表格指定列的连续同值单元格
 * @param {jQuery} $table 目标表格的jQuery对象
 * @param {Array<number>} needMergeCols 需要合并的列索引，从0开始计数（表格第一列索引为0）
 */
function mergeTableSameCell($table, needMergeCols) {
  // 列索引倒序排列，从最右侧列开始处理，避免单元格删除导致的索引错位
  needMergeCols.sort((a, b) => b - a);
  // 取所有数据行，注意排除表头行，这里沿用原有代码的tblRow类选择器匹配数据行
  const $dataRows = $table.find('tr.tblRow');

  needMergeCols.forEach(colIndex => {
    let $baseCell = null;
    let sameRowCount = 1;

    $dataRows.each(function() {
      const $curCell = $(this).find('td').eq(colIndex);
      const curCellText = $curCell.text().trim();

      // 首行初始化基准单元格
      if (!$baseCell) {
        $baseCell = $curCell;
        return;
      }

      if (curCellText === $baseCell.text().trim()) {
        // 同值累计，更新基准单元格rowspan，删除当前重复单元格
        sameRowCount++;
        $baseCell.attr('rowspan', sameRowCount);
        $curCell.remove();
      } else {
        // 遇到不同值，重置基准
        $baseCell = $curCell;
        sameRowCount = 1;
      }
    })
  })
}

// 调用方式：等表格动态数据全部渲染完成后执行
// 示例：合并id为dataTable的表格的第0、1、2列，列索引根据实际业务需求调整
$(document).ready(function() {
  mergeTableSameCell($('#dataTable'), [0, 1, 2]);
})

使用说明 #

• 必须在动态数据完成DOM渲染后再调用合并函数，如果是异步接口拉取的数据，要在数据插入表格的逻辑执行完成后再调用
• 传入的列索引从0开始计数，比如要合并表格前3列就传[0,1,2]，按需配置即可
• 如果单元格内有嵌套标签、需要按指定属性值而非文本判断是否同值，只需修改代码中curCellText和基准值的取值逻辑即可
• 如果表格没有给数据行加tblRow类，修改$dataRows的选择器匹配对应的数据行即可，注意不要把表头行包含进去

内容的提问来源于stack exchange，提问作者Gaur 97