本文介绍如何使用 jQuery 遍历 JSON 数组对象，为每个对象生成 行，为其每个属性生成 单元格，并动态渲染 HTML 表格，同时支持自动提取表头、处理特殊字符与嵌入 HTML 内容。
本文介绍如何使用 jquery 遍历 json 数组对象，为每个对象生成 `
在前端开发中，将结构化 JSON 数据快速渲染为 HTML 表格是常见需求。尤其当数据格式动态（字段名不固定）、且需兼顾可读性与安全性时，手动拼接字符串易出错，而硬编码列名又缺乏扩展性。以下提供一套清晰、可复用的 jQuery 实现方案。
✅ 基础实现：逐对象 → 逐属性构建表格
核心逻辑分两层循环：
- 外层遍历用户数组（$.each(users, ...)），每项生成一个
； - 内层遍历单个用户对象的键值对（$.each(row, ...)），每个值渲染为
，并用 .html() 安全插入（支持含 标签等合法 HTML 内容）。 function makeTable(data, containerSelector) { const $table = $(""); // 生成表头（可选：从首个对象提取 keys） if (data.length > 0 && typeof data[0] === 'object') { const headers = Object.keys(data[0]); const $thead = $("").appendTo($table); const $tr = $("
").appendTo($thead); headers.forEach(key => $(" ").text(key).appendTo($tr)); } // 生成数据行 $.each(data, function(_, user) { const $row = $(" ").appendTo($table); $.each(user, function(_, value) { // 自动转义高危字符，但保留白名单内 HTML（如 email 链接） const $cell = $(" "); $cell.html(value); // ✅ 允许安全 HTML；若需纯文本，请改用 .text(value) $cell.appendTo($row); }); }); // 渲染到目标容器 if (containerSelector) { $(containerSelector).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": 'jane@example.com', "status": "A", "lockcnt": "0", "lastlogin": "2023-11-03 11:31:57.18215" } ]; $(function() { makeTable(users, "#results"); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="results"></div>
⚠️ 注意事项与最佳实践
- 安全性优先：.html(value) 会解析 HTML，适用于已知可信内容（如后端预处理的邮箱链接）；若数据来自不可信源，应统一使用 .text(value) 并配合 DOMPurify 等库净化。
- 空数据容错：代码中已检查 data.length > 0，避免取 data[0] 报错；实际项目建议增加 Array.isArray(data) 校验。
- 性能优化：大数据量（>1000 行）时，建议使用文档片段（document.createDocumentFragment）或虚拟滚动，避免频繁 DOM 操作。
-
扩展建议：
- 添加列映射配置（如 "fullname" → "姓名"），提升可维护性；
- 结合 CSS 类控制状态（如 status === "A" 添加 .active 类）；
- 封装为 jQuery 插件（$.fn.renderTable = function(data){...}）便于复用。
该方法无需依赖第三方框架即可灵活应对动态字段场景，是轻量级数据表格渲染的可靠起点。
- 内层遍历单个用户对象的键值对（$.each(row, ...)），每个值渲染为
