如何用Axios和原生JS将列车数据分行输出到HTML表格对应行

你的代码存在4个直接导致显示异常的问题：

• 你持续向页面初始写死的3个固定单元格（.trainNum/.trainDep/.trainArr）追加文本，HTML默认会折叠换行符\n，不会自动把文本拆分成多行，所以所有内容都堆在同一个单元格里，改display: flex自然不会生效。
• 循环内创建表格行、单元格的逻辑完全错误：你先用createElement创建了td元素，转头又用字符串覆盖了这些DOM变量，还把单元格插入行的代码注释掉了，最终只把空行加到了表格里，没有实际填充内容。
• 没有做旧数据清空逻辑，每次点击搜索都会把新内容叠加到老内容上，多次搜索会出现大量重复数据。
• 不符合HTML表格规范：把动态数据行放在了<thead>表头标签内部，表头只应该放列标题，动态数据需要放在<tbody>标签内。

1. 调整HTML结构 #

删掉原本写在thead里的空数据行，新增专门放动态结果的tbody标签：

<section class="trainSchedule">
  <strong><p class="train-title">Railway Time Table</p></strong>
  <div class="box">
    Does the train go to Stockholm?
    <br />
    I'm departing from..

    <input type="text" class="request-input" placeholder="Ex: Göteborg" />
    <button class="request-btn">Search...</button>
    <div class="message-box">
      <table class="table">
        <thead>
          <tr>
            <th class="trainNumber">TrainNr:</th>
            <th class="departure">Departure:</th>
            <th class="arrival">Arrival:</th>
          </tr>
        </thead>
        <tbody class="train-tbody"></tbody>
      </table>
    </div>
    Departing from: <strong><div class="response-result"></div></strong>
  </div>
</section>

2. 重写JS渲染逻辑 #

核心逻辑改为：每次查询前清空旧结果，每一趟列车单独创建一行，三个字段分别生成独立单元格插入对应行，再把行添加到tbody中：

let reqBtn = document.querySelector(".request-btn");
let reqInput = document.querySelector(".request-input");
let respResult = document.querySelector(".response-result");
let trainTbody = document.querySelector(".train-tbody");

const API_KEY = "xxxxxxxxxxxxxxx";
const DEST_ID_FIXED = "740000001";

function getOriginIdURL(city, key) {
  return `https://api.resrobot.se/v2.1/location.name?input=${city}&format=json&accessId=${key}`;
}

function getRouteURL(originId, destId, key) {
  return `https://api.resrobot.se/v2.1/trip?format=json&originId=${originId}&destId=${destId}&passlist=true&showPassingPoints=true&accessId=${key}`;
}

function findRoute(fromCity) {
  let searchURL = getOriginIdURL(fromCity, API_KEY);

  axios.get(searchURL).then((response) => {
    let data = response.data;
    let originId = data.stopLocationOrCoordLocation[0].StopLocation.extId;

    let routeURL = getRouteURL(originId, DEST_ID_FIXED, API_KEY);

    axios.get(routeURL).then((response) => {
      let data = response.data;
      // 清空上一次查询的旧数据
      trainTbody.innerHTML = '';

      for (let i = 0; i < 3; i++) {
        // 为每趟车创建独立行
        const tr = document.createElement('tr');
        
        // 车次单元格
        const numTd = document.createElement('td');
        numTd.textContent = data.Trip[i].LegList.Leg[0].Product[0].name;
        // 发车时间单元格
        const depTd = document.createElement('td');
        depTd.textContent = data.Trip[i].Origin.time;
        // 到达时间单元格
        const arrTd = document.createElement('td');
        arrTd.textContent = data.Trip[i].Destination.time;

        // 单元格插入行，行插入表格
        tr.append(numTd, depTd, arrTd);
        trainTbody.append(tr);
      }

      respResult.textContent = reqInput.value;
    });
  });
}

reqBtn.addEventListener("click", () => {
  const keyword = reqInput.value.trim();
  if (!keyword) return;
  findRoute(keyword);
});

3. 可选：添加基础CSS优化对齐 #

不需要flex布局，用表格自带的布局能力就能实现整齐对齐：

.table {
  border-collapse: collapse;
  width: 100%;
}
.table th, .table td {
  text-align: left;
  padding: 8px 16px;
  border-bottom: 1px solid #e5e5e5;
}

修改后每趟列车信息会单独占一行，三个字段分别对应到所属列的单元格，完全匹配你预期的展示效果，不会再出现内容堆叠问题。

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