[英]Populate an HTML table from javascript array
我有一个脚本数组:
var lakeData = [
{
"Month": "1959-01",
"LakeErieLevels": 12.296
},
{
"Month": "1959-02",
"LakeErieLevels": 13.131
},
{
"Month": "1959-03",
"LakeErieLevels": 13.966
},
{
"Month": "1959-04",
"LakeErieLevels": 15.028
},
{
"Month": "1959-05",
"LakeErieLevels": 15.844
},
{
"Month": "1959-06",
"LakeErieLevels": 15.769
}
];
我有点HTML代码:
<table id="lake">
<thead><tr><th>Date</th><th>Depth</th></tr></thead>
<tbody></tbody>
</table>
而且我正试图在页面加载时让数组填充到表中。
var lakeData = [{ "Month": "1959-01", "LakeErieLevels": 12.296 }, { "Month": "1959-02", "LakeErieLevels": 13.131 }, { "Month": "1959-03", "LakeErieLevels": 13.966 }, { "Month": "1959-04", "LakeErieLevels": 15.028 }, { "Month": "1959-05", "LakeErieLevels": 15.844 }, { "Month": "1959-06", "LakeErieLevels": 15.769 } ]; function addDataToTbody(nl, data) { // nl -> NodeList, data -> array with objects data.forEach((d, i) => { var tr = nl.insertRow(i); Object.keys(d).forEach((k, j) => { // Keys from object represent th.innerHTML var cell = tr.insertCell(j); cell.innerHTML = d[k]; // Assign object values to cells }); nl.appendChild(tr); }) } var lakeTbody = document.querySelector("#lake tbody"); addDataToTbody(lakeTbody, lakeData);
<table id="lake"> <thead> <tr> <th>Date</th> <th>Depth</th> </tr> </thead> <tbody></tbody> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.