javascript - 使用 JavaScript 创建表格

Question

我正在尝试使用 javascript 创建一个表并填充 JSON 数据，但我无法让它正常工作。我想创建五列和四行。

到目前为止，我已经创建了 header ，但是在创建 populatebody 函数并尝试插入名称时，我需要一些帮助来填充正文。名称显示在行中而不是列中。

var staffs = [
    {"name": "James", "gender": "male", "dateofbirth":2011, "joined": "1997", "num_hires": 24000},
    {"name": "Anna", "gender": "female", "dateofbirth": 2013, "joined": "1980", "num_hires": 12000},
    {"name": "Ken", "gender": "male", "dateofbirth": 2013, "joined": "1980", "num_hires": 13000},
    {"name": "Tom", "gender": "male", "dateofbirth": 203, "joined": "1995", "num_hires": 12500}
];


function createheader() {
  var table = document.getElementById("header");
  var header = table.createTHead(table);
  var row = header.insertRow(0);

  var head = ["Name", "Gender", "Date of Birth", "join year", " Rentals"];
  for (let i = 0; i < head.length; i++) {
    let cell = document.createElement("td");
    cell.innerText = head[i];
    row.append(cell);
  }
}


function populatebody() {
  var table = document.getElementById("details");
  var tbody = table.createTBody(table);
  var row = tbody.insertRow(0);

  for (var i = 0; i < staffs.length; i++) {
    let cell = document.createElement("td");
    cell.innerHTML = staffs[i].name;
    row.append(cell);
  }
}

Answer 1

在循环中创建一行，生成原始 HTML 单元格(td 元素)并更新原始元素(tr)的内容。

var staffs = [
    {"name": "James", "gender": "male", "dateofbirth":2011, "joined": "1997", "num_hires": 24000},
    {"name": "Anna", "gender": "female", "dateofbirth": 2013, "joined": "1980", "num_hires": 12000},
    {"name": "Ken", "gender": "male", "dateofbirth": 2013, "joined": "1980", "num_hires": 13000},
    {"name": "Tom", "gender": "male", "dateofbirth": 203, "joined": "1995", "num_hires": 12500}
];

function createheader() {
  var table = document.getElementById("table");
  var header = table.createTHead(table);
  var row = header.insertRow(0);

  var head = ["Name", "Gender", "Date of Birth", "join year", " Rentals"];
  for (let i = 0; i < head.length; i++) {
    let cell = document.createElement("td");
    cell.innerText = head[i];
    row.append(cell);
  }
}

function populatebody() {
  var table = document.getElementById("table");
  var tbody = table.createTBody(table);

  for (var i = 0; i < staffs.length; i++) {

    var row = tbody.insertRow(0);
    row.innerHTML = `
    <td>${staffs[i].name}</td>
    <td>${staffs[i].gender}</td>
    <td>${staffs[i].dateofbirth}</td>
    <td>${staffs[i].joined}</td>
    <td>${staffs[i].num_hires}</td>
    `;
  }
}

createheader();
populatebody();

<table id="table"></table>