如何仅用原生JS将JSON文件数据渲染到HTML表格（不使用jQuery）

当前代码存在的核心问题 #

• 循环赋值逻辑存在缺陷：每次遍历都给同一个id="dt"的单元格设置内容，后一次赋值会直接覆盖前一次的结果，循环执行完成后，页面只会显示JSON数组中最后一条的日期字段，前面遍历到的所有日期都会被覆盖丢失
• 表格结构没有适配批量数据的渲染需求，单靠一个固定的td单元格无法承载多行动态数据
• 若直接以本地文件路径打开HTML页面测试，浏览器的同源安全策略会拦截XMLHttpRequest读取本地JSON的请求，导致数据加载失败

具体修改步骤 #

1. 替换原有的单单元格表格结构，预留专门承载动态渲染数据的容器：

<table class="table">
  <thead>
    <tr>
      <th>交易日期</th>
    </tr>
  </thead>
  <!-- 容器用来存放所有动态生成的数据行 -->
  <tbody id="stockTableBody"></tbody>
</table>

2. 调整JS的渲染逻辑，循环拼接每一行的表格内容，最后一次性将所有行渲染到容器中，修改后的脚本逻辑如下：

function loadData() {
  const xhttp = new XMLHttpRequest();
  xhttp.open('GET', 'data.json', true);
  xhttp.send();
  xhttp.onreadystatechange = function () {
    if (xhttp.readyState === 4 && xhttp.status === 200) {
      const data = JSON.parse(xhttp.responseText);
      // 预定义空字符串，存储所有拼接完成的表格行内容
      let tableRowsHTML = '';
      for (let i = 0; i < data.stocktrade.length; i++) {
        // 每遍历一条JSON数据，就拼接一行对应的表格行
        tableRowsHTML += `<tr><td>${data.stocktrade[i].date}</td></tr>`;
      }
      // 循环结束后，一次性将所有行写入tbody，不会出现内容覆盖的问题
      document.getElementById('stockTableBody').innerHTML = tableRowsHTML;
    }
  }
}

实操注意事项 #

• 测试项目时不要直接双击打开HTML文件，建议在项目根目录启动简单的本地静态服务，避免浏览器拦截本地文件读取请求
• 后续如果要在表格中展示其他字段（比如股票代码、交易金额），只需要在表格表头和循环拼接的行中添加对应td列即可，核心渲染逻辑不需要调整

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