JavaScript设置弹窗内HTML表格单元格rowSpan属性失效问题求解

问题根因 #

你当前代码的渲染错误来自3个核心问题：

• 逐行逐列生成表格时，固定每行生成4个单元格，没有适配原表格因跨行合并导致的单元格数量差异（原表格第二行因为首单元格跨2行，实际只有3个单元格，多生成的单元格会打乱排版）
• 复制单元格内容时仅读取了innerHTML，完全没有同步原单元格的rowSpan/colSpan合并属性，无法复现跨行效果
• 行遍历逻辑没有覆盖原表格的全部行，且混淆了表头、表体的行索引，导致部分内容丢失

可行实现方案 #

方案1：直接克隆原表格节点（推荐） #

不需要手动写循环拼接表格结构，直接克隆原表格的DOM节点追加到弹窗内即可，能100%保留所有合并属性、样式、内容，不会出现结构错误。
修正后的addTable函数代码：

function addTable() {
    const modalBody = document.getElementById("myTableBody");
    // 避免重复生成表格
    if (modalBody.querySelector("#cloneTable")) return;
    // 克隆原表格节点
    const oldTable = document.getElementById('table1');
    const cloneTable = oldTable.cloneNode(true);
    cloneTable.id = "cloneTable";
    modalBody.appendChild(cloneTable);
}

方案2：手动逐单元格构建的修正逻辑 #

如果需要手动生成表格结构，需要对原有循环逻辑做3处修正：

1. 遍历行时，不再固定循环次数，遍历原表格所有表体行即可
2. 遍历单元格时，不再固定列数，按原行的实际单元格数量生成
3. 生成新单元格时，同步复制原单元格的rowSpan、colSpan属性，以及对应的标签类型（th/td）
   修正后的手动构建代码：

function addTable() {
    const modalBody = document.getElementById("myTableBody");
    if (modalBody.querySelector("#newTable")) return;
    const oldTable = document.getElementById('table1');
    // 新建表格
    const table = document.createElement('TABLE');
    table.id = "newTable";
    table.border = '1';
    const tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
    // 遍历原表所有表体行，跳过第0行的表头
    for (let i = 1; i < oldTable.rows.length; i++) {
        const oldTr = oldTable.rows[i];
        const newTr = document.createElement('TR');
        newTr.style.border = 'solid 2px black';
        newTr.style.padding = '5px';
        tableBody.appendChild(newTr);
        // 按原行的实际单元格数量遍历
        for (let j = 0; j < oldTr.cells.length; j++) {
            const oldCell = oldTr.cells[j];
            // 按照原单元格的标签类型创建新节点（th/td）
            const newCell = document.createElement(oldCell.tagName);
            newCell.width = '100px';
            newCell.style.border = 'solid 2px black';
            newCell.style.padding = '5px';
            // 同步跨行、跨列属性
            newCell.rowSpan = oldCell.rowSpan;
            newCell.colSpan = oldCell.colSpan;
            // 复制单元格内容
            newCell.innerHTML = oldCell.innerHTML;
            newTr.appendChild(newCell);
        }
    }
    modalBody.appendChild(table);
}

内容的提问来源于stack exchange，提问作者Shanmuk Eswar