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

Posted 2023-05-09

【中文标题】从 2 个数据集填充表。在同一个 td 中添加数据数据

【英文标题】：Populate table from 2 data sets. Add data data in same td

【发布时间】：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？

【参考方案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>