HTML表格单元格合并异常：单元格有内容但innerText为空

核心问题诊断 #

• innerText获取内容异常：innerText会受CSS可见性、文本格式（如换行、空格）影响，可能导致明明有内容却返回空字符串，改用textContent.trim()能更可靠地获取单元格的实际文本内容，同时去除多余空白字符。
• 越界访问导致崩溃：代码未判断row + currentCell.rowSpan是否超出表格行数范围，当该值等于或大于table.rows.length时，访问不存在的行单元格会直接抛出错误，引发崩溃。

修复后的代码 #

function mergeCells(){
    var table = document.getElementById("mainTable");
    // 遍历每一列（从第2列开始，索引1）
    for (var col = 1; col < table.rows[1].cells.length; col++) {
        console.log("COL: " + col);
        // 遍历每一行（从第2行开始，索引1）
        for (var row = 1; row < table.rows.length;) {
            var currentCell = table.rows[row].cells[col];
            // 获取当前单元格的文本内容，去除首尾空白
            var currentText = currentCell.textContent.trim();
            console.log("ROW: " + (row + currentCell.rowSpan));
            console.log("CURRENTSPAN: " + currentCell.rowSpan);
            console.log("CURRENTTEXT: " + currentText);
            
            // 循环判断下一行同列单元格是否可合并
            while (currentText !== "" 
                && row + currentCell.rowSpan < table.rows.length 
                && currentText === table.rows[row + currentCell.rowSpan].cells[col].textContent.trim()) {
                // 删除下一行的当前列单元格
                table.rows[row + currentCell.rowSpan].deleteCell(col);
                // 增加当前单元格的行跨度
                currentCell.rowSpan++;
            }
            // 跳转到下一个未合并的行
            row += currentCell.rowSpan;
            console.log("                    ");
        }
    }
}

修改说明 #

1. 替换内容获取方式：将所有innerText替换为textContent.trim()，解决空白字符和样式影响导致的内容匹配失败问题。
2. 增加越界判断：在while循环条件中添加row + currentCell.rowSpan < table.rows.length，确保不会访问不存在的行，避免崩溃。
3. 调整循环终止条件：原代码的row < table.rows.length - 1可能会遗漏最后一行，改为row < table.rows.length确保所有行都被处理。

内容的提问来源于stack exchange，提问作者Mattia Antonacci