js实现表格合并

实现表格合并的方法

在JavaScript中实现表格合并通常涉及操作DOM元素，合并相邻的相同单元格。以下是几种常见的方法：

使用原生JavaScript合并行

通过遍历表格的行和列，检查相邻单元格内容是否相同，若相同则进行合并。

function mergeCells(tableId, columnIndex) {
    const table = document.getElementById(tableId);
    let previousText = '';
    let startRow = 0;

    for (let i = 0; i < table.rows.length; i++) {
        const currentText = table.rows[i].cells[columnIndex].innerText;
        if (currentText === previousText) {
            table.rows[i].deleteCell(columnIndex);
            table.rows[startRow].cells[columnIndex].rowSpan++;
        } else {
            previousText = currentText;
            startRow = i;
        }
    }
}

使用jQuery简化操作

如果项目中已引入jQuery，可以更简洁地实现合并功能。

function mergeCells(tableId, columnIndex) {
    $(`#${tableId} tr`).each(function() {
        const currentText = $(this).find('td').eq(columnIndex).text();
        if (currentText === $(this).prev().find('td').eq(columnIndex).text()) {
            $(this).find('td').eq(columnIndex).remove();
            $(this).prev().find('td').eq(columnIndex).attr('rowspan', 
                parseInt($(this).prev().find('td').eq(columnIndex).attr('rowspan') || 1) + 1);
        }
    });
}

合并列的实现

合并列的逻辑与合并行类似，但需要横向遍历单元格。

function mergeColumns(tableId, rowIndex) {
    const table = document.getElementById(tableId);
    let previousText = '';
    let startCol = 0;

    for (let i = 0; i < table.rows[rowIndex].cells.length; i++) {
        const currentText = table.rows[rowIndex].cells[i].innerText;
        if (currentText === previousText) {
            table.rows[rowIndex].cells[i].remove();
            table.rows[rowIndex].cells[startCol].colSpan++;
        } else {
            previousText = currentText;
            startCol = i;
        }
    }
}

动态表格的合并处理

对于动态生成的表格，可以在数据渲染完成后调用合并函数。

function renderTable(data) {
    const table = document.getElementById('dynamic-table');
    data.forEach(item => {
        const row = table.insertRow();
        row.insertCell().textContent = item.name;
        row.insertCell().textContent = item.category;
    });
    mergeCells('dynamic-table', 1); // 合并第二列
}

注意事项

• 合并操作会修改DOM结构，可能影响后续的单元格索引。
• 合并后的单元格需通过rowSpan或colSpan属性正确设置跨行/列数。
• 对于复杂表格，建议先备份原始数据以便恢复。

以上方法可根据实际需求调整，适用于大多数表格合并场景。