我有一个网页，其中包含如下 JSON 对象数组:
[
{
id: 10
name : abc
},
{
id: 11
name : xyz
}
]
我希望将这些元素添加到 HTML 表格中，以便该表格如下所示:
最佳答案
//<[!CDATA[
/* external.js */
var doc, bod, M, I, Q, S, tableize, old = onload; // for use on other pages
onload = function(){
if(old)old(); // change old var name if using technique on other pages
doc = document; bod = doc.body;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
Q = function(selector, withinElement){
var w = withinElement || doc;
return w.querySelectorAll(selector);
}
S = function(selector, withinElement){
var w = withinElement || doc;
return w.querySelector(selector);
}
tableize = function(tableArray){
for(var i=0,tbd=I('tbd'),l=tableArray.length; i<l; i++){
var o = tableArray[i], tr = M('tr'), id = M('td'), nm = M('td');
id.innerHTML = o.id; nm.innerHTML = o.name;
tr.appendChild(id); tr.appendChild(nm); tbd.appendChild(tr);
}
}
var tableArray = [
{id:10, name:'abc'},
{id:11, name:'xyz'}
];
tableize(tableArray);
}
//]]>/* external.css */
html,body{
padding:0; margin:0;
}
body{
background:#000; overflow-y:scroll;
}
.main{
width:940px; background:#ccc; padding:20px; margin:0 auto;
}
table{
border-collapse:collapse; font:20px Arial, Helvetica, sans-serif; text-align:center;
}
thead{
background:yellow;
}
th,td{
padding:0 20px;
}<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='external.css' />
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div class='main'>
<table id='table'>
<thead><tr><th>ID</th><th>Name</th></tr></thead>
<tbody id='tbd'></tbody>
</table>
</div>
</div>
</body>
</html>关于javascript - 如何从网页获取 JSON 对象数组并将每个元素添加到 HTML 中的行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49439995/