本文详解如何使用 jQuery 动态将 JSON 对象数组渲染为 HTML 表格，自动为每个对象创建 行、为每个属性值创建 单元格，并支持灵活扩展（如自动生成表头、安全渲染 HTML 内容等）。

本文详解如何使用 jquery 动态将 json 对象数组渲染为 html 表格，自动为每个对象创建 `

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

` 行、为每个属性值创建 `` 单元格，并支持灵活扩展（如自动生成表头、安全渲染 html 内容等）。

在前端开发中，常需将结构化数据（如 API 返回的 JSON 数组）快速可视化为 HTML 表格。核心需求是：对数组中每个对象生成一行 ，再对其每个属性（key-value 对）生成一个单元格 。以下提供一套简洁、健壮且可复用的 jQuery 实现方案。

✅ 基础实现：双层遍历构建表格

function makeTable(data, containerSelector) {
  const $table = $('<table class="dynamic-table">');

  // 遍历每个用户对象（生成 <tr>）
  $.each(data, function(rowIndex, userObj) {
    const $row = $('<tr>').appendTo($table);

    // 遍历当前对象的每个属性（生成 <td>）
    $.each(userObj, function(key, value) {
      // 使用 .text() 防止 XSS（默认转义 HTML），若需渲染富文本（如邮箱链接），改用 .html()
      const $cell = $('<td>').text(value);
      $cell.appendTo($row);
    });
  });

  // 插入目标容器并返回 DOM 引用
  if (containerSelector) {
    $(containerSelector).empty().append($table);
  }
  return $table;
}

// 示例数据（注意：实际项目中通常来自 AJAX）
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"
  }
];

// 调用渲染（假设页面存在 <div id="results"></div>）
makeTable(users, '#results');

? 关键说明：

• 外层 $.each(data, ...) 遍历数组 → 创建 ；
• 内层 $.each(userObj, ...) 遍历对象自身可枚举属性 → 创建 ；
• 默认使用 .text(value) 确保内容安全（自动转义 HTML 标签），避免 XSS 风险；若需保留 HTML（如已处理好的邮箱链接），请显式改用 .html(value)，但务必确保数据来源可信。

⚙️ 进阶优化：自动生成表头（thead）

若希望表格包含语义化表头（），可从首个对象提取 keys 作为列名：

function makeTableWithHeaders(data, containerSelector) {
  if (!data || data.length === 0) return;

  const $table = $('<table class="dynamic-table">');
  const $thead = $('<thead>').appendTo($table);
  const $headerRow = $('<tr>').appendTo($thead);

  // 提取首项的属性名作为表头
  Object.keys(data[0]).forEach(key => {
    $('<th>').text(key).appendTo($headerRow);
  });

  const $tbody = $('<tbody>').appendTo($table);
  $.each(data, function(_, userObj) {
    const $row = $('<tr>').appendTo($tbody);
    $.each(userObj, function(_, value) {
      $('<td>').text(value).appendTo($row);
    });
  });

  $(containerSelector).empty().append($table);
  return $table;
}

⚠️ 注意事项与最佳实践

• 安全性优先：永远避免直接 .html() 渲染不可信数据。对 email 字段中含 标签的情况，应由后端返回纯文本，或前端用 DOMPurify 等库进行白名单过滤后再插入。
• 空值处理：生产环境建议增强健壮性，例如 value == null ? '-' : value 替换空值。
• 性能考量：大数据量（>1000 行）时，应考虑虚拟滚动或分页，避免 DOM 过载。
• 替代方案：现代项目推荐使用 Vue/React 的响应式列表渲染，或成熟表格库（如 DataTables、AG Grid），它们内置排序、搜索、分页等功能。

通过以上方法，你可快速、安全地将任意 JSON 对象数组转化为结构清晰的 HTML 表格，兼顾可读性与可维护性。

立即学习“前端免费学习笔记（深入）”；