本文讲解如何使用 jQuery 动态将 JSON 对象数组渲染为 HTML 表格，自动为每个对象创建 行、每个属性生成 单元格，并支持灵活扩展（如自动生成表头、处理 HTML 内容等）。
本文讲解如何使用 jquery 动态将 json 对象数组渲染为 html 表格，自动为每个对象创建 `
在前端开发中，常需将结构化数据（如 API 返回的 JSON 数组）快速渲染为 HTML 表格。核心思路是：外层遍历数组生成 ✅ 关键要点说明： 掌握此模式后，你不仅能快速渲染表格，还可轻松适配分页、排序、搜索等常见需求——底层逻辑始终是「数组→行，对象→单元格」的双重迭代。 行，内层遍历对象键值对生成 单元格。以下是一个健壮、可复用的 jQuery 实现：
function makeTable(data, targetSelector) {
if (!Array.isArray(data) || data.length === 0) {
console.warn("输入数据为空或非数组，无法生成表格");
return null;
}
const $table = $("
");
// 遍历每个用户对象（每行数据）
$.each(data, function(rowIndex, userObj) {
const $row = $("
").appendTo($table);
// 遍历当前对象的每个属性（每列数据）
$.each(userObj, function(key, value) {
const $cell = $("
");
// 安全渲染：若值含 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": "[email protected]",
"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>
列表；
