使用JS更新HTML表格整列数据仅单次生效问题求解

两个版本的代码分别存在逻辑问题：

• 第一版仅更新单个单元格：HTML规范里id是全局唯一标识，$('#vc_state')只能匹配到页面上第一个带id="vc_state"的元素，你把所有拼接好的<td>全部塞进这一个元素内部，当然只能修改到一个单元格，无法覆盖整列。
• 第二版仅能执行一次：replaceWith()方法会直接把选中的DOM元素从页面结构中替换删除，第一次执行完，页面上已经不存在id="vc_state"的节点了，后续再调用函数找不到匹配元素，自然无法更新。

前置DOM调整 #

首先去掉State列单元格上重复的id="vc_state"，给整列所有要更新的单元格加上统一的类名作为选择器，示例表格结构如下：

<table>
  <thead>
    <tr>
      <th>其他列</th>
      <th>State</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>业务数据1</td>
      <td class="vc-state-cell"></td>
    </tr>
    <tr>
      <td>业务数据2</td>
      <td class="vc-state-cell"></td>
    </tr>
    <!-- 其余所有行的State列单元格都加上vc-state-cell类名 -->
  </tbody>
</table>

JS更新逻辑 #

核心逻辑是按数据顺序匹配对应行的单元格，直接更新单元格内容，不删除替换原有DOM节点，保证多次调用时选择器始终能匹配到目标元素。

原生JS写法：

response.json().then(function (new_data) {
  console.log(new_data);
  // 获取State列所有单元格，顺序和表格行顺序一致
  const stateColumnCells = document.querySelectorAll('.vc-state-cell');
  new_data.forEach((item, index) => {
    // 做边界判断，避免数据行数和表格行数不匹配时抛出错误
    if (stateColumnCells[index]) {
      stateColumnCells[index].textContent = item.vc_state;
    }
  });
});

jQuery写法：

response.json().then(function (new_data) {
  console.log(new_data);
  new_data.forEach((item, index) => {
    // 按索引定位到对应行，找到State列单元格更新内容
    $('tbody tr').eq(index).find('.vc-state-cell').text(item.vc_state);
  });
});

只要接口返回的new_data数组顺序和表格行的展示顺序一一对应，上述代码无论重复调用多少次，都可以正常更新整列数据，全程不需要刷新页面。

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