Node.js+EJS实现表格单元格按列名匹配正确归位

表格列错位的核心原因是渲染逻辑存在缺陷：生成每行内容时，仅输出了当前行实际存在地址对应的<td>单元格，没有严格按照表头的完整地址列表顺序渲染，缺省位置没有补空单元格占位，导致单元格依次向前排列，无法和表头列一一对应。

无需修改现有后端MongoDB聚合查询代码，仅调整EJS模板的表格行渲染逻辑即可实现需求：

• 每行渲染前，先把当前行的地址统计为「地址名:出现次数」的键值映射表，方便快速匹配
• 渲染单元格时，直接遍历完整的表头地址列表allAddresses逐个生成<td>，当前行存在对应地址就填入计数内容，不存在则留空，保证每行单元格总数和表头列数完全一致，从根源避免错位
• 原有表格样式、返回按钮、其他页面逻辑均无需改动

核心替换代码 #

把原模板中<tr>标签内、车辆编号表头之后的所有计数、循环输出单元格的旧逻辑全部删除，替换为以下代码：

<% 
// 统计当前行各地址的出现次数
const addressCountMap = {};
arrayOfAddresses.forEach(addr => {
  addressCountMap[addr] = (addressCountMap[addr] || 0) + 1;
});
%>
<% // 严格按表头顺序渲染每一列，缺省自动留空
allAddresses.forEach(colAddr => { %>
  <td>
    <% if(addressCountMap[colAddr]){ %>
      <%= `${addressCountMap[colAddr]} ${colAddr}` %>
    <% } %>
  </td>
<% }) %>

完整表格部分代码参考 #

<%- include('partials/header') -%>

<table id="mainTable" width='100%' class="table table-bordered table-hover table-striped table-sm">
  <tr>
    <th></th>
    <% allAddresses.forEach((gtem) => { %>
      <th scope="col" style='writing-mode: vertical-rl; transform: rotate(180deg)'><%= gtem %></th>
    <% }) %>
  </tr>
  <% for (let item = 0; item < address.length; item++){ %>
    <% let stockIdentifier = address[item].rollingStockNumber.slice(11, 22) %>
    <% let arrayOfAddresses = _.values(address[item].addresses).sort() %>
    <tr>
      <th align="center"><%- stockIdentifier.slice(0, 4) + " " + stockIdentifier.slice(4, 6) + " " + stockIdentifier.slice(6, 10) + " " + stockIdentifier.slice(10, 11) %></th>
      <% 
      const addressCountMap = {};
      arrayOfAddresses.forEach(addr => {
        addressCountMap[addr] = (addressCountMap[addr] || 0) + 1;
      });
      %>
      <% allAddresses.forEach(colAddr => { %>
        <td>
          <% if(addressCountMap[colAddr]){ %>
            <%= addressCountMap[colAddr] + " " + colAddr %>
          <% } %>
        </td>
      <% }) %>
    </tr>
  <% } %>
</table>
<form action="/indexCalculated.html" method="post">
    <button class="btn btn-dark" type="submit" name="backToMainPage" style="margin: 15px 10px 40px 742px; display: inline-block">Back</button>
</form>

<%- include('partials/footer') -%>

说明：该逻辑对含特殊字符的地址（如Qo'qon带单引号的名称）兼容性正常，字符串键值匹配不会受特殊字符影响，替换后刷新页面即可看到对齐效果。

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