提问人：Ted 提问时间：11/2/2023 最后编辑：Mister JojoTed 更新时间：11/3/2023 访问量：100
将 JSON 数据显示到 HTML 表格
Display JSON data to HTML Table
问：
我对 JS 有点陌生，正在努力以表格格式显示 JSON 数据。JSON 如下
var js = {
"columns": [{
"title": "t1"
},
{
"title": "t2"
},
{
"title": "t3"
},
{
"title": "t4"
},
{
"title": "t5"
}
],
"rows": [
[
"t1row1",
"t2row1",
"t3row1",
"t4row1",
"t5row1"
],
[
"t1row2",
"t2row2",
"t3row2",
"t4row2",
"t5row2"
],
[
"t1row3",
"t2row3",
"t3row3",
"t4row3",
"t5row3"
]
]
};
let text = "<table border='1'>"
text += "<tr>";
for (let x in js.columns) {
text += "<th>" + js.columns[x].title + "</th>";
}
text += "</tr>";
text += "<tr>";
for (let y in js.columns) {
for (var v in js.rows) {
text += "<td>" + js.rows[v] + "</td>";
}
}
text += "</tr>";
text += "</table>"
document.getElementById("demo").innerHTML = text;<div id="demo"></div>我使用这些循环以表格格式获取数据，但我无法将“行”数据发送到标题下的 3 个单独的行中。通过当前代码，我能够正确放置 5 列名称，但我们有一行 [t1row1，t2row1，t3row1，t4row1，t5row1] ， [t1row2，t2row2，t3row2，t4row2，t5row2] ...等插入数据而不是 3 行。任何帮助将不胜感激
答：
2赞
XM01 - stands with Palestine
11/2/2023
#1
为了获得结果，您需要循环访问数据行并将它们添加到表中，同时保留结构。你在循环之外有打开/关闭。这意味着你正在制作一个大的，里面有很多东西（正如你的结果所示）。TRTRTD
您需要将它们移动到循环中，即遍历行的循环。更新代码：
var js = {
"columns": [
{
"title": "t1"
},
{
"title": "t2"
},
{
"title": "t3"
},
{
"title": "t4"
},
{
"title": "t5"
}
],
"rows": [
[
"t1row1",
"t2row1",
"t3row1",
"t4row1",
"t5row1"
],
[
"t1row2",
"t2row2",
"t3row2",
"t4row2",
"t5row2"
],
[
"t1row3",
"t2row3",
"t3row3",
"t4row3",
"t5row3"
]
]
};
let text = "<table border='1'>";
text += "<tr>";
for (let x in js.columns) {
text += "<th>" + js.columns[x].title + "</th>";
}
text += "</tr>";
for (let i in js.rows) {
text += "<tr>";
for (let j in js.rows[i]) {
text += "<td>" + js.rows[i][j] + "</td>";
}
text += "</tr>";
}
text += "</table>";
document.getElementById("demo").innerHTML = text;<div id="demo"></div>评论
0赞
Martijn
11/2/2023
添加了有关解决方案的更多上下文:)
0赞
Mister Jojo
11/3/2023
@Martijn恕我直言，这个答案不值得一个好的编码员
0赞
Martijn
11/3/2023
@MisterJojo嗯，确实不漂亮。但它是 OP 的代码，并应用了修复程序。可以更清洁吗？是的。但它能解决问题吗？也是。
0赞
Mister Jojo
11/3/2023
OP @Martijn询问的是如何在表中显示 JS 数据。他正在寻找一种编码的方法。他的算法错误不是他问题的一部分。提出一个更“干净”的答案正是我所做的，我看不出这怎么值得对我的几篇帖子投连续反对票
1赞
Mister Jojo
11/2/2023
#2
table 元素具有您应该使用的特定方法： https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement
const js =
{ columns:
[ { title: 't1' }
, { title: 't2' }
, { title: 't3' }
, { title: 't4' }
, { title: 't5' }
]
, rows:
[ [ 't1row1', 't2row1', 't3row1', 't4row1', 't5row1' ]
, [ 't1row2', 't2row2', 't3row2', 't4row2', 't5row2' ]
, [ 't1row3', 't2row3', 't3row3', 't4row3', 't5row3' ]
] };
const table = document.querySelector('#demo').appendChild(document.createElement('table'));
let
tHead = table.createTHead()
, tBody = table.createTBody()
, rowX = tHead.insertRow()
;
js.columns.forEach(({title}) => rowX.insertCell().textContent = title);
js.rows.forEach(arr =>
{
rowX = tBody.insertRow();
arr.forEach( txt => rowX.insertCell().textContent = txt );
});html {
font-family : Arial, Helvetica, sans-serif;
font-size : 16px;
}
table {
border-collapse : separate;
border-spacing : 1px;
background-color : darkblue;
margin : 1em;
color : black;
}
table td {
background-color : whitesmoke;
padding : .2em .6em;
min-width : 4.2em;
text-align : center;
}
table thead td {
padding : .3em .6em;
background-color : #3acec2;
font-weight : bold;
}<div id="demo"></div>
评论