JS新手求教：如何将指定JSON数据正确渲染为HTML表格

问题出在你没有遍历rows数组中的每一项，而是直接把整个行数组内容插入到单个单元格里。以下是修正后的代码示例：

示例JSON数据 #

{
  "columns": ["姓名", "年龄", "职业"],
  "rows": [
    ["张三", 25, "程序员"],
    ["李四", 30, "设计师"],
    ["王五", 28, "产品经理"]
  ]
}

修正后的HTML与JavaScript代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JSON转表格</title>
</head>
<body>
  <table id="dataTable" border="1"></table>

  <script>
    // 模拟你的JSON数据
    const jsonData = {
      "columns": ["姓名", "年龄", "职业"],
      "rows": [
        ["张三", 25, "程序员"],
        ["李四", 30, "设计师"],
        ["王五", 28, "产品经理"]
      ]
    };

    const table = document.getElementById('dataTable');
    const thead = document.createElement('thead');
    const headerRow = document.createElement('tr');

    // 生成列标题
    jsonData.columns.forEach(col => {
      const th = document.createElement('th');
      th.textContent = col;
      headerRow.appendChild(th);
    });
    thead.appendChild(headerRow);
    table.appendChild(thead);

    // 生成表格行数据
    const tbody = document.createElement('tbody');
    jsonData.rows.forEach(row => {
      const tr = document.createElement('tr');
      // 遍历当前行的每个单元格数据
      row.forEach(cell => {
        const td = document.createElement('td');
        td.textContent = cell;
        tr.appendChild(td);
      });
      tbody.appendChild(tr);
    });
    table.appendChild(tbody);
  </script>
</body>
</html>

关键修正点 #

• 遍历jsonData.rows数组的每一项，为每个数组元素创建一个<tr>行元素
• 对每一行的内部数组再次遍历，为每个单元格数据创建<td>元素，插入到对应的行里

这样就能把rows里的每一组数据拆分成独立的表格行，每个数据对应单独的单元格。

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