从 javascript 数组填充 HTML 表答案

【问题标题】：Populate an HTML table from javascript array从 javascript 数组填充 HTML 表
【发布时间】：2017-11-26 02:05:56
【问题描述】：

我有一个脚本数组：

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>

我正在尝试让数组在页面加载时填充到表格中。

【问题讨论】：

有很多 JavaScript 库可以用于此。datatables.net/examples/data_sources/js_array.html。您的问题没有显示任何（重新）搜索努力或尝试解决它，并且您已经得到了答案stackoverflow.com/questions/47482073/…

标签： javascript html arrays

【解决方案1】：

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>

【讨论】：