基于Request Id列更新Request Status列：多行列场景下的实现疑问

首先直接说结论：不建议给多行数据的<td>设置重复的id="requestId"，HTML规范里id是页面唯一的标识，重复id会导致DOM选择器（比如getElementById）只返回第一个匹配的元素，后续的都会被忽略，还可能引发样式或脚本的奇怪问题。下面分场景给你具体的解决方案：

1. 只有一行数据的场景 #

如果确定表格永远只有一行，用id="requestId"是可以工作的，但其实更推荐用class或者data属性（比如data-request-id），这样以后如果扩展成多行，代码不用大改。

举个实际示例：

<table>
  <thead>
    <tr>
      <th>Request Id</th>
      <th>Request Status</th>
      <!-- 其他列 -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-request-id="REQ-001">REQ-001</td>
      <td class="request-status"></td>
      <!-- 其他列内容 -->
    </tr>
  </tbody>
</table>

然后脚本里获取Request Id并填充状态：

// 获取唯一的行
const row = document.querySelector('tbody tr');
const requestId = row.querySelector('[data-request-id]').dataset.requestId;

// 这里模拟从数据库/接口获取状态的逻辑
const status = getRequestStatus(requestId); // 假设这个函数是你封装的请求方法
row.querySelector('.request-status').textContent = status;

2. 多行数据的场景 #

这时候必须放弃重复id，改用data属性或者class来标识元素，然后遍历每一行处理：

步骤1：渲染表格时给每行加标识 #

后端返回数据后，渲染表格的时候，给每个请求Id的单元格加上data-request-id，同时给状态列的单元格留好标识（比如class）：

<table id="requestTable">
  <thead>
    <tr>
      <th>Request Id</th>
      <th>Request Status</th>
      <!-- 其他列 -->
    </tr>
  </thead>
  <tbody>
    <!-- 假设用模板引擎渲染后端返回的requests数组 -->
    <% requests.forEach(req => { %>
    <tr>
      <td data-request-id="<%= req.id %>"><%= req.id %></td>
      <td class="request-status"></td>
      <!-- 其他列内容 -->
    </tr>
    <% }) %>
  </tbody>
</table>

步骤2：遍历行批量填充状态 #

const table = document.getElementById('requestTable');
const rows = table.querySelectorAll('tbody tr');

// 遍历每一行处理
rows.forEach(async row => {
  const requestId = row.querySelector('[data-request-id]').dataset.requestId;
  // 异步请求获取状态（如果是从数据库拿，这里应该是调用后端接口）
  const status = await fetchRequestStatus(requestId); 
  row.querySelector('.request-status').textContent = status;
});

额外优化建议 #

其实最省心高效的方式是后端在查询Request Id的时候，直接关联查询出对应的Request Status，把状态数据和其他表格数据一起返回给前端，这样前端不用再单独发请求，既减少了HTTP请求次数，也避免了前端遍历处理的麻烦。

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