如何利用JSON数据创建HTML表格？附示例JSON数据

嘿，这事儿不难！我来给你一步步演示怎么用你提供的JSON数据生成HTML表格，用原生JavaScript就能搞定，不需要额外的库～

首先，先看你的JSON结构：外层是一个以ID为键的对象，每个键对应的值是包含具体数据的子对象。我们要把它转换成带ID列的表格，表头包含ID、amt、pc、bId这几个字段。

方法一：原生DOM操作（安全可靠，适合所有场景） #

这种方法通过创建DOM元素来构建表格，不会有XSS风险，哪怕数据不可信也能用：

// 你的JSON数据（如果是字符串形式，先用JSON.parse()解析，比如JSON.parse(yourJsonString)）
const jsonData = { 
  "7627": {"amt":2000,"pc":"3","bId":"1"}, 
  "7868": {"amt":0,"pc":"2","bId":"1"}, 
  "7990": {"amt":0,"pc":"2","bId":"1"} 
};

// 创建表格元素，加个边框合并的样式让表格更美观
const table = document.createElement('table');
table.style.borderCollapse = 'collapse';

// 构建表头
const thead = document.createElement('thead');
const headerRow = document.createElement('tr');
// 提取表头：ID + 第一个子对象的所有键
const headers = ['ID', ...Object.keys(jsonData['7627'])];

headers.forEach(headerText => {
  const th = document.createElement('th');
  th.textContent = headerText;
  th.style.border = '1px solid #ddd';
  th.style.padding = '8px';
  th.style.backgroundColor = '#f2f2f2';
  headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);

// 构建表格主体
const tbody = document.createElement('tbody');
// 遍历每个ID和对应的数据
Object.entries(jsonData).forEach(([id, rowData]) => {
  const row = document.createElement('tr');
  
  // 添加ID单元格
  const idCell = document.createElement('td');
  idCell.textContent = id;
  idCell.style.border = '1px solid #ddd';
  idCell.style.padding = '8px';
  row.appendChild(idCell);
  
  // 添加其他数据单元格
  Object.values(rowData).forEach(value => {
    const cell = document.createElement('td');
    cell.textContent = value;
    cell.style.border = '1px solid #ddd';
    cell.style.padding = '8px';
    row.appendChild(cell);
  });
  
  tbody.appendChild(row);
});
table.appendChild(tbody);

// 把表格添加到页面的body里（你也可以指定其他容器）
document.body.appendChild(table);

方法二：innerHTML拼接（简洁高效，适合可信数据） #

如果你的JSON数据是完全可信的（不会包含恶意代码），用innerHTML拼接会更简洁：

const jsonData = { 
  "7627": {"amt":2000,"pc":"3","bId":"1"}, 
  "7868": {"amt":0,"pc":"2","bId":"1"}, 
  "7990": {"amt":0,"pc":"2","bId":"1"} 
};

// 生成表头HTML字符串
const headers = ['ID', ...Object.keys(jsonData['7627'])];
const headerHtml = `<thead><tr>${headers.map(header => 
  `<th style="border:1px solid #ddd;padding:8px;background:#f2f2f2">${header}</th>`
).join('')}</tr></thead>`;

// 生成表格主体HTML字符串
const bodyHtml = `<tbody>${Object.entries(jsonData).map(([id, data]) => `
  <tr>
    <td style="border:1px solid #ddd;padding:8px">${id}</td>
    ${Object.values(data).map(value => `<td style="border:1px solid #ddd;padding:8px">${value}</td>`).join('')}
  </tr>
`).join('')}</tbody>`;

// 组合成完整的表格HTML
const tableHtml = `<table style="border-collapse:collapse">${headerHtml}${bodyHtml}</table>`;

// 把表格添加到页面
document.body.innerHTML += tableHtml;

小提示 #

• 如果你的JSON数据最初是字符串格式（比如从后端接口拿到的），记得先用JSON.parse()把它转换成JavaScript对象再使用。
• 代码里的样式是可选的，你可以根据自己的需求修改，或者用CSS类来统一控制表格样式。

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