时间戳

首页 > 解决方案 > 更改函数以生成表列而不是行

javascript - 更改函数以生成表列而不是行

问题描述

我有一个用 JSON 数据制作表格的脚本，它可以工作。但为简洁起见，我需要将数据布置为垂直标题。换句话说，高度和日期在第一列，对应的数据在右边。

let PROGWandH = [ { height: "108.0", date: "2019-04-12 00:00:00" },{ height: "108.0", date: "2019-05-13 00:00:00" },{ height: "109.0", date: "2019-06-21 00:00:00" },{ height: "111.5", date: "2019-10-16 00:00:00" },{ height: "111.5", date: "2019-11-15 00:00:00" } ];

function generateTableHead(table, data) {
  let thead = table.createTHead();
  let row = thead.insertRow();
  for (let key of data) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }
}

function generateTable(table, data) {
  for (let element of data) {
    let row = table.insertRow();
    for (key in element) {
      let cell = row.insertCell();
      let text = document.createTextNode(element[key]);
      cell.appendChild(text);
    }
  }
}

let table = document.querySelector(".PROGWandH");
let data = Object.keys(PROGWandH[0]);
generateTable(table, PROGWandH);
generateTableHead(table, data);
<table class="PROGWandH"></table>

任何人都可以帮忙吗？

标签： javascriptjson

解决方案

您可以循环N次您的 Array 并使用.reduce()将单元格字符串还原为行字符串并最终使用Element.insertAdjacentHTML(where, what)

const arr = [ { height: "108.0", date: "2019-04-12 00:00:00" },{ height: "108.0", date: "2019-05-13 00:00:00" },{ height: "109.0", date: "2019-06-21 00:00:00" },{ height: "111.5", date: "2019-10-16 00:00:00" },{ height: "111.5", date: "2019-11-15 00:00:00" } ];
const rows = Object.keys(arr[0]).reduce((row, pr) => (row += `<tr><th>${pr}</th>${arr.reduce((cells, ob) => (cells += `<td>${ob[pr]}</td>`, cells), '')}</tr>`, row), '');

// Insert once when done.
document.querySelector(".PROGWandH").insertAdjacentHTML('beforeend', rows);
<table class="PROGWandH"></table>

推荐阅读