JavaScript新手求助：如何遍历接口数据生成表格行与列？

嘿，作为JS新手遇到这个问题太正常啦，我帮你梳理下现有代码的问题，然后给出能实现需求的修正方案：

现有代码的核心问题 #

1. getData没有返回有效数据：你在最后一个.then里只打印了数据，但没写return data，导致后续data.then(createTR)拿到的是undefined，根本没法处理接口返回的赛事信息。
2. createTR逻辑不完善：这个函数只创建了一个<td>，但每场赛事需要多列（比如主队、客队、比赛时间等）；而且用document.querySelector(".myTr")只会选中第一个带myTr类的行，所有列都会堆到第一行里。
3. 缺少数据遍历逻辑：你直接把整个数据对象传给createTR，没有循环处理每一场赛事，自然没法生成多行。

修正后的完整代码 #

1. 修正getData函数（确保返回数据）

export function getData() {
  return fetch('https://stryk.herokuapp.com/tipset')
    .then(response => response.json())
    .then(data => {
      console.dir(data);
      // 必须返回数据，这样后续Promise才能拿到赛事数组
      return data;
    });
}

2. 重写createTR函数（处理单场赛事，生成多列）

function createTR(match) {
  // 创建当前赛事的<tr>元素
  const tr = document.createElement("TR");
  tr.className = "myTr";

  // 根据接口返回的赛事字段创建对应<td>（这里假设接口返回的match包含homeTeam、awayTeam、date字段，你可以根据实际返回调整）
  // 主队列
  const homeTd = document.createElement("TD");
  homeTd.textContent = match.homeTeam;
  tr.appendChild(homeTd);

  // 客队列
  const awayTd = document.createElement("TD");
  awayTd.textContent = match.awayTeam;
  tr.appendChild(awayTd);

  // 比赛时间列（格式化日期让它更易读）
  const dateTd = document.createElement("TD");
  dateTd.textContent = new Date(match.date).toLocaleString();
  tr.appendChild(dateTd);

  // 把生成的<tr>添加到目标表格中
  document.getElementById("table").appendChild(tr);
}

3. 修正myFunction（遍历所有赛事，生成对应行）

function myFunction() {
  getData().then(matches => {
    // 先清空之前生成的行，避免重复点击后表格内容重复
    document.querySelectorAll(".myTr").forEach(row => row.remove());

    // 遍历每一场赛事，调用createTR生成对应的行
    matches.forEach(match => {
      createTR(match);
    });
  });
}

4. 保留你的事件绑定逻辑（这部分没问题）

import {getData} from './getdata.js';

function event() {
  document.querySelector('#active').addEventListener('click', myFunction);
}

// 初始化事件绑定
event();

关键说明 #

• 数据返回：getData的最后一个.then必须返回数据，否则Promise链后续拿不到有效赛事信息。
• 元素操作：创建<tr>后直接在这个元素上添加<td>，不要用querySelector去查找，避免选中旧的行。
• 遍历数据：接口返回的是赛事数组，所以用forEach循环每个赛事，生成对应的行。
• 避免重复：每次点击按钮先移除之前生成的行，防止表格内容重复堆积。

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