Question

背景：我以为最终将创建一个动态创建的表，该表具有与JSON数据中的条目相同数量的test('25', 'l\'Espagne')标签。

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

下面是循环和表创建的一小段。

<TR>

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

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

<div id='tasklist'></div>

希望这会有所帮助，

Answer 2

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

Answer 3

如果data是对象数组，请从.map()或.forEach()之类的数组方法开始（demo使用.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);

遍历JSON数据，appendChild将数据放入一行吗？

3 个答案: