Javascript 表未从对象数组中正确填充

我有一个对象数组。我想用对象数组中的值填充我的表：

这是我的代码：

let数据=[
{cat:'one'，device:'iphone'，site:'google'，val1:10，val2:20，val3:30}，
{猫：'2'，设备：'iphone'，网站：'bing'，val1:23，val2:12，val3:14}，
{猫：'3'，设备：'iphone'，网站：'jeeves'，val1:67，val2:78，val3:12}，
{猫：'four'，设备：'ipad'，网站：'google'，val1:10，val2:20，val3:30}，
{猫：'5'，设备：'ipad'，网站：'bing'，val1:23，val2:12，val3:14}，
{猫：'six'，设备：'ipad'，网站：'jeeves'，val1:67，val2:78，val3:12}，
{cat:'seven'，device:'mac'，site:'google'，val1:10，val2:20，val3:30}，
{猫：'8'，设备：'mac'，站点：'bing'，val1:23，val2:12，val3:14}，
{cat:'nine'，device:'mac'，site:'jeeves'，val1:67，val2:78，val3:15}
]
设heads=Object.keys（数据[0]）；
forEach（d=>$（`headers`）.append（`${d}'）；
data.forEach（td=>{
$（`body\u deets`）。追加（``）；
头.额（th=>{
$（`body\u deets>tr`）。追加（`td[th]}`）；
});
});
您当前的代码显示了该行为，因为您将所有
trs
作为目标放在您的tbody中，因此它会将数据附加到所有trs中。因此，要使这项工作使用
：last
这将引用附加到
tbody
的最后一个tr。i、 e:

$(`#body_deets > tr:last`).append(`<td>${td[th]}</td>`)

$（`body\u deets>tr:last`）。追加（`td[th]}`）
您会发现，如果保留对新行的引用，则可以更轻松地向其中添加单元格

通过改变

$('#body_deets').append(`<tr></tr>`);

Hi，将$（
#body_deets>tr
）更改为$（
#body_deets>tr:last
）看看会发生什么。@Swati，起作用了！如果你把它作为一个答案，我可以检查它。谢谢
var row = $("<tr>").appendTo("#body_deets");