循环遍历 JSON 数据和 appendChild <TR> 是否将数据放在一行中？

Question

背景：我以为我最终会得到一个动态创建的表，该表具有与<TR>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()or .forEach()（演示使用，.foreach()因为制作表格实际上并不需要新数组）。

2. 这将遍历.insertRow()用于每个对象的数组。现在使用Object.values()or将每个对象转换为其值的元素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)

        )

    );

});