循环遍历 JSON 数据并 appendChild <TR> 将数据放在一行中？答案

【问题标题】：Loop through JSON data and appendChild <TR> is putting data in one row?循环遍历 JSON 数据并 appendChild <TR> 将数据放在一行中？
【发布时间】：2019-10-04 07:05:28
【问题描述】：

背景：我认为我最终会得到一个动态创建的表，该表具有与 JSON 数据中的条目相同数量的 <TR> 标记。

结果：循环只是创建一个表TR，并将所有数据放在一行中。

下面是循环和表创建的sn-p。

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);

问题：我需要为每个循环创建一个唯一的行变量吗？

【问题讨论】：

你愿意用jquery吗？
我希望尽可能保持原样。这更像是一个学习/培训练习，所以我想没有错误的答案。

标签： javascript for-loop html-table appendchild

【解决方案1】：

有几个问题：

您将文本附加到td，而不清除它们。您可以改为在循环中为每个数据点执行document.createElement('td')。
每次数据迭代都需要一行，这也可以在循环内完成。
请使用let 和const 代替var。请参阅this post 了解更多信息。

试试这样的：

const data = [{
    name: 'name1',
    date: 'date1',
    assigned: 'assigned1'
  },
  {
    name: 'name2',
    date: 'date2',
    assigned: 'assigned2'
  },
  {
    name: 'name3',
    date: 'date3',
    assigned: 'assigned3'
  },
];

let tbl = document.createElement("table");
let tblBody = document.createElement("tbody");
data.forEach(d => {
  let row = document.createElement("tr");
  row.appendChild(document.createTextNode(d.name));
  row.appendChild(document.createTextNode(d.date));
  row.appendChild(document.createTextNode(d.assigned));
  tblBody.appendChild(row);
});

tbl.appendChild(tblBody);
document.getElementById("tasklist").appendChild(tbl);

&lt;div id='tasklist'&gt;&lt;/div&gt;

希望这会有所帮助，

【讨论】：

那么创建每个循环增量的行变量是我所缺少的吗？我很感激我现在要测试的帮助。谢谢！如果有人对我的错误有任何反馈，我们也欢迎。
是的，我已经更新了我的答案，使其更加具体:)
非常感谢您的反馈，该解决方案非常完美。我再次感谢“为什么”检查的背景。
没问题，glhf

【解决方案2】：

如果data 是一个对象数组，请从.map() 或.forEach() 之类的数组方法开始（演示使用.foreach()，因为创建表并不需要一个新数组）。
这将对每个对象使用.insertRow() 遍历数组。现在使用Object.values() 或Object.keys() 将每个对象转换为它的值的一个元素（演示使用Object.values() 可以节省一个步骤）。
现在使用.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);

【讨论】：

【解决方案3】：

我刚刚看到您的评论，您更喜欢 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)
        )
    );
});

【讨论】：