循环通过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

如果data是对象的数组，开始像一个阵列的方法.map()或.forEach()（演示使用.foreach()，因为是不是真的需要一个新的阵列做一个表）。这将使用.insertRow()每个对象迭代数组。现在每个对象转换成元件的它的值与Object.values()或Object.keys()（演示使用Object.values()这节省了步骤）。现在通过与值的阵列迭代.forEach()或.map()和.insertCell()然后.textContent的值到细胞中。let&nbsp;data&nbsp;=&nbsp;[{ &nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'John&nbsp;Doe', &nbsp;&nbsp;&nbsp;&nbsp;date:&nbsp;'1/1/19', &nbsp;&nbsp;&nbsp;&nbsp;assigned:&nbsp;'A' &nbsp;&nbsp;}, &nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'Jane&nbsp;Doe', &nbsp;&nbsp;&nbsp;&nbsp;date:&nbsp;'2/1/819', &nbsp;&nbsp;&nbsp;&nbsp;assigned:&nbsp;'B' &nbsp;&nbsp;}, &nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'Darth&nbsp;Vader', &nbsp;&nbsp;&nbsp;&nbsp;date:&nbsp;'3/11/19', &nbsp;&nbsp;&nbsp;&nbsp;assigned:&nbsp;'C' &nbsp;&nbsp;}, &nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'Obi&nbsp;Wan', &nbsp;&nbsp;&nbsp;&nbsp;date:&nbsp;'4/20/19', &nbsp;&nbsp;&nbsp;&nbsp;assigned:&nbsp;'D' &nbsp;&nbsp;}];const&nbsp;frag&nbsp;=&nbsp;document.createDocumentFragment();const&nbsp;tbl&nbsp;=&nbsp;document.createElement("table");const&nbsp;tblB&nbsp;=&nbsp;document.createElement("tbody"); &nbsp;&nbsp;tbl.appendChild(tblB);frag.appendChild(tbl);data.forEach((obj,&nbsp;idx)&nbsp;=>&nbsp;{ &nbsp;&nbsp;let&nbsp;row&nbsp;=&nbsp;tblB.insertRow(); &nbsp;&nbsp;Object.values(obj).forEach(val&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;cell&nbsp;=&nbsp;row.insertCell(); &nbsp;&nbsp;&nbsp;&nbsp;cell.textContent&nbsp;=&nbsp;val; &nbsp;&nbsp;});});document.body.appendChild(frag);

Answer 2

我刚刚看到你的评论，你更喜欢vanilla js。如果感兴趣，这是jquery方式。var&nbsp;data&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;Column1:&nbsp;"col1row1",&nbsp;Column2:&nbsp;"col2row1"&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;Column1:&nbsp;"col1row2",&nbsp;Column2:&nbsp;"col2row2"&nbsp;}];$("#tasklist") &nbsp;&nbsp;&nbsp;&nbsp;.append($('<table>') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.append($('<tbody>')));var&nbsp;tbody&nbsp;=&nbsp;$("#tasklist&nbsp;>&nbsp;table&nbsp;>&nbsp;tbody");$.each(data,&nbsp;function&nbsp;(idx,&nbsp;item)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$(tbody).append($('<tr>') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.append($('<td>') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.text(item.Column1) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.append($('<td>') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.text(item.Column2) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;) &nbsp;&nbsp;&nbsp;&nbsp;);});