提问人:Travis 提问时间:11/3/2023 最后编辑:j08691Travis 更新时间:11/3/2023 访问量:53
为每个对象构建表格行,为每个属性构建单元格 [closed]
Build table row for each object & cell for each property [closed]
问:
尝试使用 JSON 数据填充表。我是 JSON 的新手。
console.log(JSON.stringify(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"
}]
如何构建一个 each 来遍历每个对象,然后遍历每个属性,以便我可以在对象上生成 tr 标签,在属性上生成 td。
答:
-1赞
Twisty
11/3/2023
#1
如果我们不做任何假设,比如你希望表将键显示为标题,那么你将需要执行一个嵌套循环的循环。第一个循环将从 Array 的每个元素创建 Rows。第二个循环将填充对象中的单元格。
一个基本的例子:
$(function() {
var 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"
}];
function makeTable(bodyData, target) {
var $t = $("<table>");
$.each(bodyData, function(key, row) {
$("<tr>").appendTo($t);
$.each(row, function(i, cell) {
$("<td>").html(cell).appendTo($("tr:last", $t));
});
});
if (target != undefined) {
$(target).html($t);
}
return $t;
}
makeTable(users, "#results");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results"></div>
由此,您可以执行许多额外的步骤,例如,您可以从其中一个对象中收集密钥并为表构建标头。
还有很多可以使用的框架,比如 Datatables,它们可以为你完成这一切。
评论
users
users.forEach((u) => $("#tbl").append("<tr><td>" + u.fullname + "</td></tr>"))