Javascript 循环JSON数据并追加子项<；TR>；是否将数据放在一行中？

Background:我以为我最终会得到一个动态创建的表，该表的

标记数与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);

---

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

有几个问题：

您正在将文本附加到

td

，而没有清除它们。您可以在循环中为每个数据点执行

document.createElement（'td'）

每次数据迭代都需要一行，这也可以在循环中完成

请使用和代替。有关更多信息，请参阅 试着这样做：

const数据=[{
名称：'name1'，
日期：“日期1”，
已分配：“已分配1”
},
{
名称：'name2'，
日期：'date2'，
已分配：“已分配2”
},
{
名称：'name3'，
日期：“date3”，
已分配：“已分配3”
},
];
设tbl=document.createElement（“表”）；
让tblBody=document.createElement（“tbody”）；
data.forEach（d=>{
让row=document.createElement（“tr”）；
行.appendChild（document.createTextNode（d.name））；
行.appendChild（document.createTextNode（d.date））；
appendChild（document.createTextNode（d.assigned））；
tblBody.appendChild（世界其他地区）；
});
tbl.附肢儿童（tblBody）；
document.getElementById（“任务列表”）.appendChild（tbl）
有几个问题：

您正在将文本附加到
td
，而没有清除它们。您可以在循环中为每个数据点执行
document.createElement（'td'）

每次数据迭代都需要一行，这也可以在循环中完成
请使用和代替。有关更多信息，请参阅
试着这样做：


const数据=[{
名称：'name1'，
日期：“日期1”，
已分配：“已分配1”
},
{
名称：'name2'，
日期：'date2'，
已分配：“已分配2”
},
{
名称：'name3'，
日期：“date3”，
已分配：“已分配3”
},
];
设tbl=document.createElement（“表”）；
让tblBody=document.createElement（“tbody”）；
data.forEach（d=>{
让row=document.createElement（“tr”）；
行.appendChild（document.createTextNode（d.name））；
行.appendChild（document.createTextNode（d.date））；
appendChild（document.createTextNode（d.assigned））；
tblBody.appendChild（世界其他地区）；
});
tbl.附肢儿童（tblBody）；
document.getElementById（“任务列表”）.appendChild（tbl）
我刚刚看到你的评论，你更喜欢香草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)
        )
    );
});

var数据=[
{Column1:“col1row1”，Column2:“col2row1”}，
{Column1:“col1row2”，Column2:“col2row2”}
];
$（“#任务列表”）
.append（$（''）
。附加（$（''）；
var tbody=$（“#任务列表>表格>tbody”）；
$。每个（数据、函数（idx、项）{
$（tbody）.附加（$（''）
.append（$（''）
.文本（第1栏第1项）
)
.append（$（''）
.文本（第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)
        )
    );
});

var数据=[
{Column1:“col1row1”，Column2:“col2row1”}，
{Column1:“col1row2”，Column2:“col2row2”}
];
$（“#任务列表”）
.append（$（''）
。附加（$（''）；
var tbody=$（“#任务列表>表格>tbody”）；
$。每个（数据、函数（idx、项）{
$（tbody）.附加（$（''）
.append（$（''）
.文本（第1栏第1项）
)
.append（$（''）
.文本（第2栏项目）
)
);
});

如果
data
是一个对象数组，那么从一个数组方法开始，比如
.map（）
或
.forEach（）
（演示使用
.forEach（）
，因为创建表实际上不需要新数组）
这将对每个对象使用
.insertRow（）
遍历数组。现在，使用
object.values（）
或
object.keys（）
（演示使用
object.values（）
保存步骤）将每个对象转换为其值的元素
现在，使用
.forEach（）
或
.map（）
和
.insertCell（）
遍历值数组，然后
.textContent
将值添加到单元格中

let数据=[{
姓名：“约翰·多伊”，
日期：“1/1/19”，
分配：“A”
},
{
姓名：“简·多伊”，
日期：“2/1/819”，
分配：“B”
},
{
名称：“达斯维德”，
日期：“3/11/19”，
分配：“C”
},
{
姓名：“欧比万”，
日期：“4/20/19”，
分配：“D”
}
];
const frag=document.createDocumentFragment（）；
const tbl=document.createElement（“表”）；
const tblB=document.createElement（“tbody”）；
tbl.附加子项（tblB）；
框架附件（tbl）；
data.forEach（（obj，idx）=>{
设row=tblB.insertRow（）；
Object.values（obj.forEach）（val=>{
let cell=row.insertCell（）；
cell.textContent=val；
});
});
文件.正文.附件（frag）
如果
data
是一个对象数组，那么从一个数组方法开始，比如
.map（）
或
.forEach（）
（演示使用
.forEach（）
，因为创建表实际上不需要新数组）
这将对每个对象使用
.insertRow（）
遍历数组。现在，使用
object.values（）
或
object.keys（）
（演示使用
object.values（）
保存步骤）将每个对象转换为其值的元素
现在，使用
.forEach（）
或
.map（）
和
.insertCell（）
遍历值数组，然后
.textContent
将值添加到单元格中

let数据=[{
姓名：“约翰·多伊”，
日期：“1/1/19”，
分配：“A”
},
{
姓名：“简·多伊”，
da