如何在表格中交换HTMLTableCellElement节点？解决赋值只读报错

问题场景 #

现有如下HTML表格：

<table id="myTable">
    <tbody>
        <tr>
            <td>
                <a href="/link_a.html">col A</a>
            </td>
            <td>
                <a href="/link_b.html"><span class="special">col B</span></a>
            </td>
            <td>other cols
            </td>
        </tr>
        <tr>
            <td>value A
            </td>
            <td>value B
            </td>
            <td><span class="morespecial">more values</span>
            </td>
        </tr>
    </tbody>
</table>

尝试用JavaScript将表格某列的单元格节点复制到另一列（先实现覆盖，后续做交换），编写代码如下：

var tableObj = document.getElementById("mytable")
for (var r of tableObj.rows) {
    var cell_store = {};
    for (var [i, c] of enumerate (r.cells)) {
        cell_store [i] = c;
    }
    r.cells [0] = cell_store [1];
}

运行时报错：Uncaught (in promise) TypeError: 0 is read-only

错误原因 #

• r.cells是只读的HTMLCollection：HTMLCollection是类数组对象，但它的元素无法通过直接赋值修改（比如r.cells[0] = xxx这种写法不被允许），这是报错的直接原因。
• enumerate不是原生JavaScript方法：浏览器环境没有内置该函数，会触发额外错误。
• 直接赋值节点是移动而非复制：就算赋值能成功，cell_store[1]是原节点的引用，操作后会把原单元格从第二列移到第一列，而非复制新节点。

正确实现方法 #

要复制包含子元素的单元格，需用cloneNode(true)创建节点的深拷贝，再通过DOM操作方法替换或插入单元格：

覆盖第一列单元格 #

// 注意id大小写匹配：原HTML表格id是myTable，不是mytable
const tableObj = document.getElementById("myTable");
for (const row of tableObj.rows) {
    // 深拷贝第二列单元格（true表示复制所有子元素与属性）
    const targetCell = row.cells[1].cloneNode(true);
    // 替换第一列的原单元格
    row.replaceChild(targetCell, row.cells[0]);
}

实现两列交换 #

如果后续要完成列交换，可先分别拷贝两列单元格，再依次替换：

const tableObj = document.getElementById("myTable");
for (const row of tableObj.rows) {
    const cell0Copy = row.cells[0].cloneNode(true);
    const cell1Copy = row.cells[1].cloneNode(true);
    row.replaceChild(cell1Copy, row.cells[0]);
    row.replaceChild(cell0Copy, row.cells[1]);
}

关键要点 #

• 用cloneNode(true)实现深拷贝，完整保留单元格内的子元素、样式与属性
• 通过replaceChild、appendChild等DOM标准方法操作单元格，而非直接修改HTMLCollection的元素
• getElementById是大小写敏感的，需确保代码中的id与HTML中的定义一致

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