js实现表格合并

合并表格单元格的基本方法

使用原生JavaScript合并表格单元格通常需要操作DOM元素，通过设置rowSpan或colSpan属性实现。以下是一个基础示例：

function mergeCells(tableId, startRow, endRow, col) {
  const table = document.getElementById(tableId);
  for (let i = startRow; i < endRow; i++) {
    const cell = table.rows[i].cells[col];
    if (cell) {
      cell.style.display = 'none';
      table.rows[startRow].cells[col].rowSpan++;
    }
  }
}

动态检测内容合并

自动合并相同内容的相邻单元格更实用。以下方法可检测列内容相同的连续行进行合并：

function autoMerge(tableId, columnIndex) {
  const table = document.getElementById(tableId);
  let previousValue = null;
  let startRow = 0;

  for (let i = 0; i < table.rows.length; i++) {
    const currentValue = table.rows[i].cells[columnIndex].textContent;
    if (currentValue === previousValue) {
      table.rows[i].cells[columnIndex].style.display = 'none';
      table.rows[startRow].cells[columnIndex].rowSpan++;
    } else {
      startRow = i;
      previousValue = currentValue;
    }
  }
}

多列合并处理

处理多列合并时需要更复杂的逻辑，以下示例展示如何同时处理行和列合并：

function multiMerge(tableId) {
  const table = document.getElementById(tableId);
  const mergeMap = {};

  // 扫描所有单元格建立合并映射
  for (let r = 0; r < table.rows.length; r++) {
    for (let c = 0; c < table.rows[r].cells.length; c++) {
      const cell = table.rows[r].cells[c];
      const value = cell.textContent;
      if (!mergeMap[value]) mergeMap[value] = [];
      mergeMap[value].push({row: r, col: c});
    }
  }

  // 执行合并
  Object.values(mergeMap).forEach(group => {
    if (group.length > 1) {
      const firstCell = table.rows[group[0].row].cells[group[0].col];
      firstCell.rowSpan = group[group.length-1].row - group[0].row + 1;
      for (let i = 1; i < group.length; i++) {
        table.rows[group[i].row].cells[group[i].col].style.display = 'none';
      }
    }
  });
}

使用jQuery简化操作

如果项目中已引入jQuery，合并操作可以更简洁：

function jQueryMerge(tableSelector, columnIndex) {
  let prevValue = '';
  let $prevCell = null;

  $(tableSelector + ' tr').each(function() {
    const $cell = $(this).find('td').eq(columnIndex);
    const currentValue = $cell.text();

    if (currentValue === prevValue) {
      $cell.hide();
      $prevCell.attr('rowSpan', parseInt($prevCell.attr('rowSpan') || 1) + 1);
    } else {
      prevValue = currentValue;
      $prevCell = $cell;
    }
  });
}

注意事项

• 合并操作应在DOM加载完成后执行，通常放在DOMContentLoaded事件中
• 动态生成的表格需要在数据渲染完成后调用合并函数
• 合并后会影响表格结构，可能需要对样式进行额外调整
• 大量数据合并可能影响性能，建议分批处理

完整示例

<table id="dataTable">
  <tr><td>A</td><td>1</td></tr>
  <tr><td>A</td><td>2</td></tr>
  <tr><td>B</td><td>3</td></tr>
</table>

<script>
document.addEventListener('DOMContentLoaded', () => {
  autoMerge('dataTable', 0);
});
</script>

以上方法提供了不同场景下的表格合并解决方案，可根据实际需求选择适合的方式或组合使用。