JavaScript从Google Sheet获取数据仅显示首行，如何展示全部数据？

问题原因 #

你当前的代码只定义了一个固定的<tr>元素，遍历数据时每一行都会覆盖这个<tr>内的单元格内容，最终只会保留最后一次循环的结果（或仅显示第一行，取决于数据结构），无法展示全部行数据。

修复步骤 #

1. 调整HTML结构：添加<tbody>容器用于承载所有数据行，将原有单行改为隐藏的模板行，后续通过克隆模板生成新行。
2. 修改JavaScript逻辑：遍历数据时，克隆模板行并填充对应数据，再将新行追加到<tbody>中，避免内容覆盖。

完整代码示例 #

HTML部分

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Department</th>
      <th>Title</th>
      <th>Email</th>
      <th>Extension</th>
    </tr>
  </thead>
  <!-- 数据行容器 -->
  <tbody id="tableBody">
    <!-- 隐藏的模板行，用于克隆 -->
    <tr id="rowTemplate" style="display: none;">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

引入脚本

<script src="https://cdn.rawgit.com/Keyang/node-csvtojson/d41f44aa/browser/csvtojson.min.js"></script>

JavaScript部分

var url = "https://docs.google.com/spreadsheets/d/1wpJvEgNDMb-VIRgsqnpzTddqLuaqTE-XTRrctRU34P4/export?format=csv";

fetch(url)
  .then(result => result.text())
  .then(csvtext => csv().fromString(csvtext))
  .then(csvData => {
    const tableBody = document.getElementById("tableBody");
    const rowTemplate = document.getElementById("rowTemplate");

    csvData.forEach(row => {
      // 克隆模板行（true表示克隆所有子元素）
      const newRow = rowTemplate.cloneNode(true);
      // 移除隐藏样式和模板ID
      newRow.style.display = "";
      newRow.removeAttribute("id");

      // 填充每行数据
      const cells = newRow.querySelectorAll("td");
      cells[0].textContent = row.Name;
      cells[1].textContent = row.Department;
      cells[2].textContent = row.Title;
      cells[3].textContent = row.Email;
      cells[4].textContent = row.Extension;

      // 将新行添加到表格
      tableBody.appendChild(newRow);
    });
  });

补充说明 #

• 若不想使用模板行，也可在循环中直接动态创建<tr>和<td>元素，逻辑与克隆模板一致。
• 确保你的Google Sheet已设置为公开可查看，否则CSV导出链接会无法访问。

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