如何使用 JavaScript 将 JSON 数据动态渲染为 HTML 表格-js教程-PHP中文网

如何使用 JavaScript 将 JSON 数据动态渲染为 HTML 表格

本文详解如何通过原生 JavaScript 解析 JSON 数据，并按指定逻辑（如 db 为 0 显示“-”，非 0 显示“NO”）生成结构清晰、样式规范的 HTML 表格。

本文详解如何通过原生 javascript 解析 json 数据，并按指定逻辑（如 `db` 为 0 显示“-”，非 0 显示“no”）生成结构清晰、样式规范的 html 表格。

在前端开发中，将后端返回的 JSON 数据快速、准确地渲染为 HTML 表格是常见需求。本文以一个典型场景为例：给定包含 processed 数组的 JSON 数据，需将其转换为带条件渲染的表格——当字段 db 的值为 0 时显示 "-"，否则显示 "NO"；同时自动提取键名作为表头，确保代码健壮、可复用。

✅ 核心实现步骤

动态创建表格元素：使用 document.createElement() 构建 <table>、<code><thead>、<code><tbody> 及对应行/单元格；<li> <strong>自动生成表头</strong>：读取数组首项（<code>data.processed[0]）的键名，避免硬编码列名；
条件渲染单元格内容：遍历每个对象的 Object.entries()，对 db 字段做特殊处理；
插入 DOM 并添加基础样式：确保表格可视化可用。

? 完整可运行代码示例



  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSON 转 HTML 表格</title><style>
    table {
      border-collapse: collapse;
      width: 100%;
      max-width: 600px;
      margin: 20px 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 10px 12px;
      text-align: left;
    }
    th {
      background-color: #f5f5f5;
      font-weight: 600;
    }
    tr:nth-child(even) {
      background-color: #fafafa;
    }
  </style><script>
const jsonData = {
  "accepted": [{ "sum(bis)": 696 }],
  "processed": [
    { "bis": "220", "db": 0 },
    { "bis": "152", "db": 0 },
    { "bis": "152", "db": 456 },
    { "bis": "152", "db": 356 },
    { "bis": "22",  "db": 320 }
  ]
};

function createTable(data) {
  // 安全校验：确保 processed 存在且为非空数组
  if (!Array.isArray(data.processed) || data.processed.length === 0) {
    console.warn('⚠️  data.processed 为空或无效，无法生成表格');
    return;
  }

  const table = document.createElement('table');
  const thead = document.createElement('thead');
  const tbody = document.createElement('tbody');

  // 创建表头行
  const headerRow = document.createElement('tr');
  Object.keys(data.processed[0]).forEach(key => {
    const th = document.createElement('th');
    th.textContent = key === 'db' ? 'DB Status' : key; // 可选：美化表头文字
    headerRow.appendChild(th);
  });
  thead.appendChild(headerRow);
  table.appendChild(thead);

  // 创建数据行
  data.processed.forEach(item => {
    const row = document.createElement('tr');
    Object.entries(item).forEach(([key, value]) => {
      const td = document.createElement('td');
      if (key === 'db') {
        td.textContent = value === 0 ? '-' : 'NO';
      } else {
        td.textContent = String(value); // 统一转字符串，避免 null/undefined 报错
      }
      row.appendChild(td);
    });
    tbody.appendChild(row);
  });
  table.appendChild(tbody);

  // 插入页面（可替换为指定容器，如 document.getElementById('table-container')）
  document.body.appendChild(table);
}

// 执行渲染
createTable(jsonData);
</script>

⚠️ 注意事项与最佳实践

空数据防护：代码中已加入 processed 数组存在性与长度校验，防止运行时报错；
字段名兼容性：若 JSON 中含括号字段（如 "sum(bis)"），浏览器可正常渲染，但建议后端统一使用下划线命名（如 sum_bis）提升可维护性；
性能优化：对于超大数据集（>1000 行），应考虑虚拟滚动或分页，避免直接 innerHTML 拼接或频繁 DOM 操作；
扩展建议：
- 支持点击排序（监听 th 事件）；
- 添加搜索过滤功能；
- 使用 template 标签预定义结构，提升可读性；
- 结合 fetch() 动态加载远程 JSON，替代静态数据。