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

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

Node.js 可靠编程

Node.js 可靠编程技能。避免事件循环阻塞、异步陷阱、ESM 兼容问题和内存泄漏。触发词：Node.js 开发、async/await、流处理、性能优化、安全编码。

下载

` 行、每个属性生成 `` 单元格，并支持灵活扩展（如自动生成表头、处理 html 内容等）。

在前端开发中，常需将结构化数据（如 API 返回的 JSON 数组）快速渲染为 HTML 表格。核心思路是：外层遍历数组生成 行，内层遍历对象键值对生成 单元格。以下是一个健壮、可复用的 jQuery 实现：

function makeTable(data, targetSelector) {
  if (!Array.isArray(data) || data.length === 0) {
    console.warn("输入数据为空或非数组，无法生成表格");
    return null;
  }

  const $table = $("<table class='dynamic-table'>");

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

    // 遍历当前对象的每个属性（每列数据）
    $.each(userObj, function(key, value) {
      const $cell = $("<td>");
      // 安全渲染：若值含 HTML（如邮箱链接），用 .html()；纯文本建议用 .text() 防 XSS
      $cell.html(value); 
      $cell.appendTo($row);
    });
  });

  // 插入目标容器并返回 jQuery 对象，便于链式调用
  if (targetSelector && $(targetSelector).length) {
    $(targetSelector).empty().append($table);
  }

  return $table;
}

// 使用示例
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 class=\"__cf_email__\" data-cfemail=\"0f456e616a4f62766b60626e6661216c6062\" href=\"/cdn-cgi/l/email-protection\">[email&#160;protected]</a>",
    "status": "A",
    "lockcnt": "0",
    "lastlogin": "2023-11-03 11:31:57.18215"
  }
];

makeTable(users, "#results");

<!-- 引入 jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 渲染容器 -->
<div id="results"></div>

✅ 关键要点说明：

• 安全性优先：示例中使用 .html() 是因原始数据已包含合法 HTML（如邮箱链接），若数据来源不可信，应先过滤或改用 .text() 并手动转义；
• 健壮性增强：添加了空数据校验和目标元素存在性检查，避免运行时错误；
• 可扩展设计：函数返回 $table 对象，后续可链式添加样式、事件或集成 DataTables 等插件；
• 表头自动生成（进阶）：若需动态生成 ，可在循环前取 Object.keys(data[0]) 构建 列表；
• 现代替代方案：纯 JavaScript 可用 data.map(...).join("") 拼接字符串，或使用 Vue/React 等框架实现响应式渲染。

掌握此模式后，你不仅能快速渲染表格，还可轻松适配分页、排序、搜索等常见需求——底层逻辑始终是「数组→行，对象→单元格」的双重迭代。