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 += 1;
    }
  }
}

使用jQuery合并单元格

jQuery简化了DOM操作，可以更简洁地实现合并：

function mergeTableCells(tableSelector) {
  $(tableSelector + ' td').each(function() {
    const td = $(this);
    if (td.text() === td.next().text() && td.index() === td.next().index()) {
      td.attr('colspan', 2);
      td.next().remove();
    }
  });
}

动态表格合并方案

对于动态生成的表格，需要先处理数据再渲染：

function processTableData(data) {
  return data.reduce((acc, row) => {
    const lastRow = acc[acc.length - 1];
    if (lastRow && row.key === lastRow.key) {
      lastRow.span = (lastRow.span || 1) + 1;
    } else {
      acc.push({...row});
    }
    return acc;
  }, []);
}

响应式表格合并技巧

结合CSS实现响应式表格合并效果：

.merged-cell {
  grid-column: span 2;
  text-align: center;
}

function responsiveMerge(tableId) {
  const table = document.getElementById(tableId);
  const rows = table.querySelectorAll('tr');
  rows.forEach(row => {
    const cells = row.querySelectorAll('td');
    cells.forEach((cell, index) => {
      if (cell.textContent === cells[index + 1]?.textContent) {
        cell.classList.add('merged-cell');
        cells[index + 1].style.display = 'none';
      }
    });
  });
}

复杂表头合并方案

对于多级表头的复杂表格合并：

function mergeComplexHeader(tableId) {
  const table = document.getElementById(tableId);
  const headerRows = table.querySelectorAll('thead tr');

  headerRows.forEach((row, rowIndex) => {
    const cells = row.querySelectorAll('th');
    let spanCount = 1;

    cells.forEach((cell, cellIndex) => {
      const nextCell = cells[cellIndex + 1];
      if (nextCell && cell.textContent === nextCell.textContent) {
        spanCount++;
        nextCell.style.display = 'none';
      } else {
        if (spanCount > 1) {
          cell.colSpan = spanCount;
          spanCount = 1;
        }
      }
    });
  });
}

注意事项

1. 合并前确保表格结构规整，行列数一致
2. 合并操作应在DOM加载完成后执行
3. 动态数据表格需要在数据更新后重新执行合并
4. 合并后需要调整样式保证视觉一致性
5. 考虑添加合并/取消合并的交互功能

以上方法可以根据具体需求组合使用，实现不同复杂度的表格合并需求。