【发布时间】：2021-07-30 20:51:38
【问题描述】：
我正在尝试从 2 个数据集填充一个表。
我可以从一个数据集中成功地填充它。我不想附加第二个数据集（data2）中的数据。我想将数据添加到来自data1 的数据下方的相同td 中。我在每个 td 中创建了 2 个 div。第一个 div 应该包含来自 data1 的数据。如何将 data2 中的数据添加到第二个 div？
这就是我填充表格并进一步填充第一个 div 的方式：
let data1 = [
{date:'2018-01-01', device: 'iphone', site: 'google', val1:10, val2:20, val3:30},
{date:'2018-01-01', device: 'iphone', site: 'bing', val1:23, val2:12, val3:14},
{date:'2018-01-01', device: 'iphone', site: 'jeeves', val1:67, val2:78, val3:12},
{date:'2018-01-01', device: 'ipad', site: 'google', val1:10, val2:20, val3:30},
{date:'2018-01-01', device: 'ipad', site: 'bing', val1:23, val2:12, val3:14},
{date:'2018-01-01', device: 'ipad', site: 'jeeves', val1:67, val2:78, val3:12},
{date:'2018-01-02', device: 'iphone', site: 'google', val1:11, val2:22, val3:33},
{date:'2018-01-02', device: 'iphone', site: 'bing', val1:25, val2:27, val3:28},
{date:'2018-01-02', device: 'iphone', site: 'jeeves', val1:67, val2:80, val3:15},
{date:'2018-01-02', device: 'ipad', site: 'google', val1:12, val2:21, val3:31},
{date:'2018-01-02', device: 'ipad', site: 'bing', val1:26, val2:16, val3:11},
{date:'2018-01-02', device: 'ipad', site: 'jeeves', val1:65, val2:79, val3:55},
{date:'2018-01-03', device: 'iphone', site: 'google', val1:17, val2:19, val3:11},
{date:'2018-01-03', device: 'iphone', site: 'bing', val1:13, val2:15, val3:12},
{date:'2018-01-03', device: 'iphone', site: 'jeeves', val1:69, val2:79, val3:15},
{date:'2018-01-03', device: 'ipad', site: 'google', val1:17, val2:51, val3:31},
{date:'2018-01-03', device: 'ipad', site: 'bing', val1:25, val2:15, val3:17},
{date:'2018-01-03', device: 'ipad', site: 'jeeves', val1:61, val2:71, val3:15}
];
let data2 = [
{date:'2017-01-01', device: 'iphone', site: 'google', val1:30, val2:10, val3:20},
{date:'2017-01-01', device: 'iphone', site: 'bing', val1:23, val2:22, val3:17},
{date:'2017-01-01', device: 'iphone', site: 'jeeves', val1:97, val2:88, val3:15},
{date:'2017-01-01', device: 'ipad', site: 'google', val1:80, val2:30, val3:39},
{date:'2017-01-01', device: 'ipad', site: 'bing', val1:26, val2:22, val3:17},
{date:'2017-01-01', device: 'ipad', site: 'jeeves', val1:57, val2:88, val3:15},
{date:'2017-01-02', device: 'iphone', site: 'google', val1:41, val2:32, val3:35},
{date:'2017-01-02', device: 'iphone', site: 'bing', val1:26, val2:37, val3:29},
{date:'2017-01-02', device: 'iphone', site: 'jeeves', val1:47, val2:90, val3:17},
{date:'2017-01-02', device: 'ipad', site: 'google', val1:22, val2:31, val3:33},
{date:'2017-01-02', device: 'ipad', site: 'bing', val1:25, val2:26, val3:13},
{date:'2017-01-02', device: 'ipad', site: 'jeeves', val1:75, val2:89, val3:57},
{date:'2017-01-03', device: 'iphone', site: 'google', val1:27, val2:99, val3:13},
{date:'2017-01-03', device: 'iphone', site: 'bing', val1:53, val2:45, val3:15},
{date:'2017-01-03', device: 'iphone', site: 'jeeves', val1:39, val2:99, val3:17},
{date:'2017-01-03', device: 'ipad', site: 'google', val1:16, val2:31, val3:33},
{date:'2017-01-03', device: 'ipad', site: 'bing', val1:29, val2:25, val3:19},
{date:'2017-01-03', device: 'ipad', site: 'jeeves', val1:71, val2:91, val3:17}
];
Object.keys(data1[0]).forEach(heads => $(`#my_ths`).append(`<th>${heads}</th>`));
let ths = Object.keys(data1[0]);
data1.forEach(d => {
$(`#my_tds`).append(`<tr></tr>`);
ths.forEach(th => {
$(`#my_tds > tr:last`).append(`
<td>
<div class='one'>${d[th]}</div>
<div class='two'></div>
</td>
`);
});
});table, td, th { border: 1px solid black; }
#mytable {
width: 100%;
border-collapse: collapse;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='mytable'>
<thead><tr id='my_ths'></tr></thead>
<tbody id='my_tds'></tbody>
</table>如您所见，我可以填充div.one。如何使用 data2 中的数据填充 div.two？
【问题讨论】：
标签： javascript jquery arrays ecmascript-6 html-table