javascript - 使用 Javascript 制作 HTML 表格

Question

我的数据是这样的:

var manholeInfo = [{name: "manhole", date_key: "date"}]

我想制作一个像这样的图片的表格:

但结果是这样的:

---

代码:

var iwContent = document.createElement("div");
iwContent.className = 'infowindow';
iwContent.setAttribute('style', "width:160px;text-align:center;padding:5px");

var manholeInfo = [{
  name: "manhole",
  date_key: "2020-10-29"
}]

var table = document.createElement('table');

for (let element of manholeInfo) {
  let row = table.insertRow();
  for (let key in element) {
    let column = row.insertCell();
    column.innerHTML = element[key];
  }
}

iwContent.appendChild(table);
document.body.appendChild(iwContent);

Answer 1

将 table.insertRow 放入内部 for 循环中，并为每个键/值创建单独的单元格:

var iwContent = document.createElement("div");
iwContent.className = 'infowindow';
iwContent.setAttribute('style', "width:160px; text-align:center; padding:5px");

var manholeInfo = [{
  name: "manhole",
  date_key: "2020-10-29"
}]

var table = document.createElement('table');

for (let element of manholeInfo) {
  for (let key in element) {
    let row = table.insertRow();
    let columnKey = row.insertCell();
    let columnValue = row.insertCell();

    columnKey.innerHTML = key;
    columnValue.innerHTML = element[key];
  }
}

iwContent.appendChild(table);
document.body.appendChild(iwContent);