当前位置：首页 > 文章列表 > 文章 > 前端 > 动态生成 HTML 表格：基于 JSON 数据自动构建行与单元格

动态生成 HTML 表格：基于 JSON 数据自动构建行与单元格

2026-05-24 21:18:46 0浏览收藏

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《动态生成 HTML 表格：基于 JSON 数据自动构建行与单元格》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

本文介绍如何使用 jQuery 遍历 JSON 数组对象，为每个对象生成行，为其每个属性生成单元格，并动态渲染为完整 HTML 表格，支持任意结构数据且无需预设字段名。

本文介绍如何使用 jQuery 遍历 JSON 数组对象，为每个对象生成 `

` 行，为其每个属性生成 `` 单元格，并动态渲染为完整 HTML 表格，支持任意结构数据且无需预设字段名。

在前端开发中，将 JSON 数据快速渲染为 HTML 表格是常见需求，尤其适用于管理后台、数据看板等场景。当数据结构灵活（如字段名不固定或后续可能扩展）时，硬编码标签会降低可维护性。理想方案是自动推导表头并逐行逐列生成表格内容。

以下是一个轻量、健壮的 jQuery 实现，分为两步：

自动生成表头（）：提取首个对象的所有键作为列名；
动态构建表格主体（）：对每个对象遍历其属性值，生成对应和。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results"></div>

function buildTableFromJson(data, containerSelector) {
  if (!Array.isArray(data) || data.length === 0) {
    $(containerSelector).html("<p>无数据可显示</p>");
    return;
  }

  // 创建空 table 元素
  const $table = $("<table class='data-table'>");

  // ✅ 步骤1：生成表头（thead）
  const headers = Object.keys(data[0]);
  const $thead = $("<thead>").appendTo($table);
  const $headerRow = $("<tr>").appendTo($thead);
  headers.forEach(key => $("<th>").text(key).appendTo($headerRow));

  // ✅ 步骤2：生成表格主体（tbody）
  const $tbody = $("<tbody>").appendTo($table);
  data.forEach(obj => {
    const $row = $("<tr>").appendTo($tbody);
    headers.forEach(key => {
      const value = obj[key] !== undefined ? obj[key] : "";
      // 安全渲染：避免 XSS（尤其含 HTML 字符如 email 链接）
      $("<td>").text(value).appendTo($row);
      // ⚠️ 若需保留原始 HTML（如已转义的链接），改用 .html(escapeHtml(value)) 并自行实现防 XSS
    });
  });

  // 渲染到目标容器
  $(containerSelector).empty().append($table);
}

// 示例数据（注意：email 中含 HTML 标签，需谨慎处理）
const users = [
  {
    "fullname": "Bob Wirth",
    "email": "Bob @mydomain.com",
    "status": "A",
    "lockcnt": "0",
    "lastlogin": "2023-10-24 23:50:08.304896"
  },
  {
    "fullname": "Jane",
    "email": "<a href='mailto:jane@example.com'>jane@example.com</a>",
    "status": "A",
    "lockcnt": "0",
    "lastlogin": "2023-11-03 11:31:57.18215"
  }
];

// 调用函数
$(function() {
  buildTableFromJson(users, "#results");
});

? 关键注意事项：

安全性优先：示例中统一使用 .text() 渲染单元格内容，可有效防止 XSS 攻击。若业务确需渲染 HTML（如富文本邮箱），必须先对 obj[key] 做严格白名单过滤或使用 DOMPurify 等库净化。
空数据容错：函数内置对空数组/undefined 的判断，避免运行时错误。
字段一致性：本方案假设所有对象具有相同 key 集合（以首个对象为准）。若存在稀疏字段，建议预先 normalize 数据（如用 Object.assign({}, baseSchema, obj) 补全缺失值）。
性能提示：对于上千条记录，建议启用虚拟滚动或分页，避免 DOM 过载。

? 进阶建议：

如需排序、搜索、分页等能力，推荐集成 DataTables 或 AG Grid 等专业表格库；
纯原生 JavaScript 版本（不依赖 jQuery）可通过 data.forEach(...) + document.createElement 实现，适合现代项目；
可进一步封装为 Vue/React 组件，结合响应式数据流提升体验。

此方法兼顾简洁性与扩展性，是 JSON → HTML 表格转化的实用基准方案。

以上就是《动态生成 HTML 表格：基于 JSON 数据自动构建行与单元格》的详细内容，更多关于的资料请关注golang学习网公众号！