使用jQuery/Javascript合并两个html表

这是我的桌子

    <table id="first" class="merge">
      <tr>
        <td>Mick Jagger</td>                 
        <td>30</td>
        <td>50</td>
        <td>10</td>
      </tr>
       <tr>
        <td>David Bowie</td>
        <td>21</td>
        <td>45</td>
        <td>21</td>
      </tr>
    </table>
    <table id="second" class="merge">
        <tr>
        <td>Ronnie Wood</td>
        <td>45</td>
        <td>78</td>
        <td>42</td>
      </tr>
      <tr>
        <td>Mick Jagger</td>
        <td>20</td>
        <td>50</td>
        <td>10</td>
      </tr>

      <tr>
        <td>Lenny Kravitz</td>
        <td>45</td>
        <td>78</td>
        <td>42</td>
      </tr>
    </table>


    <table class="result">
</table>

---

我给你做了这个剧本

我已经对代码进行了注释，解释了它是如何工作的

$（函数（）{
//循环第一个表
$（'#first tr'）。每个（函数（）{
//得到名字
var name=$（this.find（'td:first'）.text（），
//在第二个表中搜索名称
tbl2row=$（“#秒td”）.filter（函数（）{
返回$（this）.text（）==name；
}).最近的（“tr”）；
//如果第二个表中不存在该名称
如果（tbl2row.length==0）{
//克隆行并将其添加到结果表中
$（this.clone（）.appendTo（'.result'）；
}
//第二个表中存在该行
否则{
//克隆行
var clone=$（this.clone（）；
//循环单元格，获取值并将总和添加到克隆中
clone.find（'td:not（：first'））.each（function（）{
var i=$（this）.index（），
num=parseFloat（$（this）.text（），10），
num2=parseFloat（tbl2row.find（'td:eq（'+i+'））.text（），10）；
$（this）.text（num+num2）；
});
//将克隆添加到新表中
clone.appendTo（'.result'）；
}
});
//循环第二个表
$（'#second tr'）。每个（函数（）{
var name=$（this.find（'td:first'）.text（），
resRow=$（“.result td”）.filter（函数（）{
返回$（this）.text（）==name；
}).最近的（“tr”）；
//如果名称不存在，请添加行
如果（resRow.length==0）{
$（this.clone（）.appendTo（'.result'）；
}
});
});
表格，td{border:1px纯黑色；}
表{页边距底部：1em；}

米克·贾格尔
30
50
10
大卫·鲍伊
21
45
21
罗尼·伍德
45
78
42
米克·贾格尔
20
50
10
莱尼·克拉维茨
45
78
42
如果您可以访问后端，我建议您以所需的格式从数据库中查询数据，而不要对客户端不必要地征税。更糟糕（更好）的方法是用JavaScript对数据建模，然后修改DOM。只是说说而已。悲哀的是我没有权限。哇，这太完美了。
$('.merge tr').each(function(){
  var tableRow = $(this).find("td:first-of-type").text();

  if ( $(this).find("td:first-of-type").text() === tableRow ) {
    $(this) +  $(this);
  }

  if ( $(this).find("td:first-of-type").text() !== tableRow ) {
    $(this);
  }

  $("result").append(this);

});