循环通过JSON数据和appendChild <TR>将数据放在一行？

Question

背景：我认为我最终得到的是一个动态创建的表，它与JSON数据中的条目数量相同。结果：循环仅创建一个表TR并将所有数据放在一行中。下面是循环和表创建的片段。var tbl = document.createElement("table");   var tblBody = document.createElement("tbody");   var row = document.createElement("tr");     var tdname = document.createElement('td');     var tddate = document.createElement('td');     var tdassigned = document.createElement('td');     for (var i in data) {     console.log("Hello world!" + i);     tdname.appendChild(document.createTextNode(data[i].name));     tddate.appendChild(document.createTextNode(data[i].date));     tdassigned.appendChild(document.createTextNode(data[i].assigned));     row.appendChild(tdname);     row.appendChild(tddate);     row.appendChild(tdassigned);     }     tblBody.appendChild(row);     tbl.appendChild(tblBody);     document.getElementById("tasklist").appendChild(tbl);问题：我是否需要为每个循环创建唯一的行变量？

Answer 1

1. 如果data是对象的数组，开始像一个阵列的方法.map()或.forEach()（演示使用.foreach()，因为是不是真的需要一个新的阵列做一个表）。

2. 这将使用.insertRow()每个对象迭代数组。现在每个对象转换成元件的它的值与Object.values()或Object.keys()（演示使用Object.values()这节省了步骤）。

3. 现在通过与值的阵列迭代.forEach()或.map()和.insertCell()然后.textContent的值到细胞中。

let data = [{
    name: 'John Doe',
    date: '1/1/19',
    assigned: 'A'
  },
  {
    name: 'Jane Doe',
    date: '2/1/819',
    assigned: 'B'
  },
  {
    name: 'Darth Vader',
    date: '3/11/19',
    assigned: 'C'
  },
  {
    name: 'Obi Wan',
    date: '4/20/19',
    assigned: 'D'
  }];const frag = document.createDocumentFragment();const tbl = document.createElement("table");const tblB = document.createElement("tbody");
  tbl.appendChild(tblB);frag.appendChild(tbl);data.forEach((obj, idx) => {
  let row = tblB.insertRow();
  Object.values(obj).forEach(val => {
    let cell = row.insertCell();
    cell.textContent = val;
  });});document.body.appendChild(frag);

Answer 2

我刚刚看到你的评论，你更喜欢vanilla js。如果感兴趣，这是jquery方式。

var data = [
    { Column1: "col1row1", Column2: "col2row1" },
    { Column1: "col1row2", Column2: "col2row2" }];$("#tasklist")
    .append($('<table>')
        .append($('<tbody>')));var tbody = $("#tasklist > table > tbody");$.each(data, function (idx, item) {
    $(tbody).append($('<tr>')
        .append($('<td>')
            .text(item.Column1)
        )
        .append($('<td>')
            .text(item.Column2)
        )
    );});