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

Question

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

这是我的代码：

 let data = [ {cat: 'one', device: 'iphone', site: 'google', val1:10, val2:20, val3:30}, {cat: 'two', device: 'iphone', site: 'bing', val1:23, val2:12, val3:14}, {cat: 'three', device: 'iphone', site: 'jeeves', val1:67, val2:78, val3:12}, {cat: 'four', device: 'ipad', site: 'google', val1:10, val2:20, val3:30}, {cat: 'five', device: 'ipad', site: 'bing', val1:23, val2:12, val3:14}, {cat: 'six', device: 'ipad', site: 'jeeves', val1:67, val2:78, val3:12}, {cat: 'seven', device: 'mac', site: 'google', val1:10, val2:20, val3:30}, {cat: 'eight', device: 'mac', site: 'bing', val1:23, val2:12, val3:14}, {cat: 'nine', device: 'mac', site: 'jeeves', val1:67, val2:78, val3:15} ] let heads = Object.keys(data[0]); heads.forEach(d => $(`#headers`).append(`<td>${d}</td>`)); data.forEach(td => { $(`#body_deets`).append(`<tr></tr>`); heads.forEach(th => { $(`#body_deets > tr`).append(`<td>${td[th]}</td>`); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class='table' border=1> <thead><tr id='headers'></tr></thead> <tbody id='body_deets'></tbody> </table>

如您所见，当我尝试将 append 数据放入表中时，它都是将所有数据添加到一行而不是逐行追加。 为什么我的表格没有正确填充？

Answer 1

您当前的代码显示了这种行为，因为您的目标是 tbody 内的所有trs ，因此它在所有 trs 内附加数据。 因此，要完成这项工作，请使用:last this 将引用附加到tbody的 last tr 。 IE：

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

Answer 2

您会发现，如果您保留对新行的引用，则可以更轻松地向其中添加单元格。

通过改变

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

至

var row = $("<tr>").appendTo("#body_deets");

然后，您可以直接使用新row ，而不必为每一列查找它。

 let data = [ {cat: 'one', device: 'iphone', site: 'google', val1:10, val2:20, val3:30}, {cat: 'two', device: 'iphone', site: 'bing', val1:23, val2:12, val3:14}, {cat: 'three', device: 'iphone', site: 'jeeves', val1:67, val2:78, val3:12}, {cat: 'four', device: 'ipad', site: 'google', val1:10, val2:20, val3:30}, {cat: 'five', device: 'ipad', site: 'bing', val1:23, val2:12, val3:14}, {cat: 'six', device: 'ipad', site: 'jeeves', val1:67, val2:78, val3:12}, {cat: 'seven', device: 'mac', site: 'google', val1:10, val2:20, val3:30}, {cat: 'eight', device: 'mac', site: 'bing', val1:23, val2:12, val3:14}, {cat: 'nine', device: 'mac', site: 'jeeves', val1:67, val2:78, val3:15} ] let heads = Object.keys(data[0]); heads.forEach(d => $('#headers').append(`<th>${d}</th>`)); data.forEach(td => { var row = $("<tr>").appendTo('#body_deets'); heads.forEach(th => { row.append(`<td>${td[th]}</td>`); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class='table' border=1> <thead> <tr id='headers'></tr> </thead> <tbody id='body_deets'></tbody> </table>

这使您的代码更容易遵循并且效率更高 - 更有效的是将整行生成为一个 go 和 append 中的字符串。