JS新手求助：如何从外部API取数为HTML表格动态批量添加行？

AI 小北

2026-5-8

解决批量插入新冠数据到HTML表格的问题

嘿，很高兴看到你在动手做新冠疫情仪表盘！别担心，这确实是JavaScript新手常遇到的基础问题，咱们一步步把它搞定。

先分析你当前代码的问题

你已经成功获取了API数据，但现在只生成了一行数据，原因是：

你只在循环外面创建了一行，而且硬编码用了countries[1]，循环本身只是打印数据，没有实际生成表格行
你绑定操作的是单个<tr id="data">，但批量添加数据应该直接操作表格的<tbody>

修改方案&完整代码

咱们调整代码逻辑，遍历所有国家数据，动态为每个国家生成一行表格内容：

1. 调整HTML（简化tbody的结构）

把原来的<tbody>里的<tr id="data"></tr>替换为空的带ID的tbody，方便后续操作：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>Covid 19 Summary</title>
</head>
<body>
<div class="container">
<h1 class="text-center mt-5">Covid 19 Live Summary in Table format</h1>
<table class="table table-sm table-hover" id="table1">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Total Cases</th>
<th scope="col">Total Deaths</th>
<th scope="col">Total Recovered</th>
</tr>
</thead>
<!-- 替换成带ID的空tbody -->
<tbody id="tableBody"></tbody>
</table>
<br />
<button class="btn btn-info btn-block btn-primary btn-lg" id="refresh"> Refresh Data </button>
</div>
<script src="app.js"></script>
</body>
</html>

2. 修改JavaScript（实现批量生成行）

核心逻辑是：遍历countries数组，为每个国家创建一行表格，填充对应数据后添加到tbody里：

window.addEventListener('load', () => {
  const api = "https://api.covid19api.com/summary";
  const tableBody = document.getElementById("tableBody");
  const refreshBtn = document.getElementById("refresh");

  // 初始化数据
  initialize();

  function initialize() {
    // 先清空tbody，避免重复加载数据
    tableBody.innerHTML = '';

    fetch(api)
      .then(response => response.json())
      .then(data => {
        const countries = data.Countries;
        
        // 遍历所有国家数据
        countries.forEach(country => {
          // 创建新的表格行
          const row = document.createElement('tr');
          // 填充行内的单元格内容
          row.innerHTML = `
            <td>${country.Country}</td>
            <td>${country.TotalConfirmed}</td>
            <td>${country.TotalDeaths}</td>
            <td>${country.TotalRecovered}</td>
          `;
          // 将行添加到tbody中
          tableBody.appendChild(row);
        });
      })
      .catch(err => console.error('加载数据出错:', err));
  }

  // 刷新按钮事件
  refreshBtn.addEventListener('click', initialize);
});

3. CSS保持不变

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap");
tr, td {
text-align: center;
}
body {
font-family: "Oswald", sans-serif;
}

关键逻辑解释

清空tbody：每次初始化（包括刷新）时先清空表格内容，避免重复添加数据
遍历数组：用forEach遍历所有国家数据（比for循环更简洁易读）
动态创建行：为每个国家生成一个<tr>，并用模板字符串填充四个单元格的内容，最后把行添加到tbody里

这样修改后，就能一次性把186个国家的数据都加载到表格里啦！

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