从 2 个数据集中填充 table。在同一td中添加数据数据

Question

我正在尝试从 2 个数据集中填充 table。

我可以从一个数据集中成功填充它。我不想附加第二个数据集 (data2) 中的数据。我想在来自 data1 的数据下方的相同 td 中添加数据。我在每个 td 中创建了 2 divs。第一个 div 应该包含来自 data1 的数据。如何将数据从 data2 添加到第二个 div?

这就是我填充 table 以及第一个 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？

Answer 1

您可以使用 forEach 的第二个参数来索引 data2 数组，并使用以下方法获取 data1 数组的对应值：

data2[idx][th]

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, idx) => {
    $(`#my_tds`).append(`<tr></tr>`);
    ths.forEach(th => {
        $(`#my_tds > tr:last`).append(`
            <td>
            <div class='one'>${d[th]}</div>
            <div class='two'>${data2[idx][th]}</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>

从 2 个数据集中填充 table。在同一td中添加数据数据

Populate table from 2 data sets. Add data data in same td

javascript

arrays

jquery

html-table

ecmascript-6