本文介绍如何使用 jQuery 遍历 JSON 数组对象，为每个对象生成 <tr> 行，为其每个属性生成 <td> 单元格，并动态渲染 HTML 表格，同时支持自动提取表头、处理特殊字符与嵌入 HTML 内容。
本文介绍如何使用 jquery 遍历 json 数组对象，为每个对象生成 `
在前端开发中，将结构化 JSON 数据快速渲染为 HTML 表格是常见需求。尤其当数据格式动态（字段名不固定）、且需兼顾可读性与安全性时，手动拼接字符串易出错，而硬编码列名又缺乏扩展性。以下提供一套清晰、可复用的 jQuery 实现方案。
✅ 基础实现：逐对象 → 逐属性构建表格
核心逻辑分两层循环：
- 外层遍历用户数组（$.each(users, ...)），每项生成一个 <tr>；
- 内层遍历单个用户对象的键值对（$.each(row, ...)），每个值渲染为 <td>，并用 .html() 安全插入（支持含 <a> 标签等合法 HTML 内容）。
function makeTable(data, containerSelector) {
const $table = $("<table class='user-table'>");
// 生成表头（可选：从首个对象提取 keys）
if (data.length > 0 && typeof data[0] === 'object') {
const headers = Object.keys(data[0]);
const $thead = $("<thead>").appendTo($table);
const $tr = $("<tr>").appendTo($thead);
headers.forEach(key => $("<th>").text(key).appendTo($tr));
}
// 生成数据行
$.each(data, function(_, user) {
const $row = $("<tr>").appendTo($table);
$.each(user, function(_, value) {
// 自动转义高危字符，但保留白名单内 HTML（如 email 链接）
const $cell = $("<td>");
$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": '<a href="mailto:jane@example.com">jane@example.com</a>',
"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){...}）便于复用。
该方法无需依赖第三方框架即可灵活应对动态字段场景，是轻量级数据表格渲染的可靠起点。
