本文讲解如何使用 jQuery 动态将 JSON 对象数组渲染为 HTML 表格，自动为每个对象创建 行、每个属性生成 单元格，并支持灵活扩展（如自动生成表头、处理 HTML 内容等）。
本文讲解如何使用 jquery 动态将
js
on 对象数组渲染为 html 表格，自动为每个对象创建 `
` 行、每个属性生成 `` 单元格，并支持灵活扩展（如自动生成表头、处理 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");
✅关键要点说明：Find JSON Path OnlineEasily find JSON paths within JSON objects using our intuitive Json Path Finder下载安全性优先：示例中使用 .html() 是因原始数据已包含合法 HTML（如邮箱链接），若数据来源不可信，应先过滤或改用 .text() 并手动转义；健壮性增强：添加了空数据校验和目标元素存在性检查，避免运行时错误；可扩展设计：函数返回 $table 对象，后续可链式添加样式、事件或集成 DataTables 等插件；表头自动生成（进阶）：若需动态生成 ，可在循环前取 Object.keys(data[0]) 构建 列表；现代替代方案：纯 JavaScript 可用 data.map(...).join("") 拼接字符串，或使用 Vue/React 等框架实现响应式渲染。掌握此模式后，你不仅能快速渲染表格，还可轻松适配分页、排序、搜索等常见需求——底层逻辑始终是「数组→行，对象→单元格」的双重迭代。
相关文章
-
vue搭建博客难吗
-
React Native DatePicker跨平台显示异常：iOS显示错误，Android正常？
-
CSS如何实现响应式多列文字排版_使用CSS多列布局属性column
-
pycharm怎么运行html文件_pycharm运行html文件步骤【指南】
-
怎么在HTML中通过Fetch API的AbortController实现请求超时与取消
-
浅谈Android设置透明度、黑暗度的三种方法
-
HTML组件化演进：从原生标签扩展到自定义元素的设计思路
-
深入理解JavaScript中的继承与原型链
-
CSS工具类字体与图标快速应用_font text类与icon结合
-
Vue3相对于Vue2的改进：更优秀的开源社区