jQuery双数据集填充表格：如何将data2填入对应td的第二个div

两个数据集结构完全一致、记录数相同、排序逻辑统一，完全可以在原有表格生成流程中直接匹配填充，不需要额外做DOM二次遍历。

• 遍历data1生成表格行时，通过forEach的第二个参数拿到当前行的索引值，用这个索引直接定位data2数组中同位置的对应记录
• 把生成td的模板字符串里原本空的class="two"的div，替换成填充对应data2值的结构即可
• 如果担心后续两个数据集的行顺序可能错位，可以提前基于date+device+site拼接唯一标识，把data2转成键值映射对象，查找时直接通过当前行的唯一键拿对应data2的数据，避免索引匹配出错

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生成行，第二个参数为当前行的索引
data1.forEach((data1Row, rowIdx) => {
  $(`#my_tds`).append(`<tr></tr>`);
  ths.forEach(th => {
    // 取同索引下data2的对应值，直接填充到class为two的div中
    const data2Value = data2[rowIdx][th];
    $(`#my_tds > tr:last`).append(`
        <td>
        <div class='one'>${data1Row[th]}</div>
        <div class='two'>${data2Value}</div>
        </td>
    `);
  });
});

table, td, th { border: 1px solid black; }
#mytable { 
    width: 100%;
    border-collapse: collapse; 
}
/* 可选：区分同单元格内的两组数据 */
.one { color: #222; }
.two { 
    color: #888; 
    margin-top: 4px; 
    font-size: 0.9em;
    border-top: 1px dotted #eee;
    padding-top: 2px;
}

<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>

如果后续两个数据集的行排序无法保证完全一致，可以把索引匹配的逻辑替换成键值映射匹配：

1. 提前将data2处理成映射对象，以date+device+site拼接的唯一组合键为key
2. 填充时通过当前data1行的同字段组合键，从映射中取对应的data2数据
   这样就算两个数据集排序错位，也能匹配到正确的对应记录，示例替换代码：

// 构建data2的唯一键映射，避免顺序错位
const data2KeyMap = {};
data2.forEach(item => {
  const uniqueKey = `${item.date}_${item.device}_${item.site}`;
  data2KeyMap[uniqueKey] = item;
});

// 取值逻辑替换为
const currentData2Row = data2KeyMap[`${data1Row.date}_${data1Row.device}_${data1Row.site}`];
const data2Value = currentData2Row ? currentData2Row[th] : '';

内容的提问来源于stack exchange，提问作者nb_nb_nb