使用 jQuery/Javascript 合并两个 html 表

Question

这是我的桌子

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

我喜欢做的是：

1) 对于具有 .merge 类的表格，获取每个第一个 tr td 元素的文本（Mick Jagger、David Bowie、Ronnie Wood、Mick Jagger、Lenny Kravitz）

2) 如果任何文本与第二个表中的文本匹配（在我们的示例中为 Mick Jagger，但实际上匹配的元素可能是数百个）。获取整个 tr 并将其附加到 .result 表格中。第一个 td 元素保持不变 - mick jagger 并对每个下一个 td 元素求和 30 + 20 下一个 td 将是 50 + 50，下一个 50 + 50。

3) 如果文本与第二个表不匹配，则将此 tr 原样附加到 .result 表中。所以新的一行将是 David Bowie 21 45 21。下一个 Ronnie Wood 45 78 42 等等。

这是我创建的函数，但我认为其中有几个错误。我无法创建更好的功能。

$('.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);

});

Answer 1

我为你制作了这个脚本。

我已对代码进行了注释以解释其工作原理。

$(function() {
  // loop first table
  $('#first tr').each( function() {
    // get the name
    var name = $(this).find('td:first').text(),
        // search the name in the second table
        tbl2row = $("#second td").filter(function() {
          return $(this).text() == name;
        }).closest("tr");
    
    // if the name doesn't exist in the second table
    if( tbl2row.length == 0 ) {
      // clone the row and add it to the result table
      $(this).clone().appendTo('.result');
    }
    // the row exists in the second table
    else {
      // clone the row
      var clone = $(this).clone();
      // loop the cells, get the values and add the sum to the 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);
      });
      // add the clone to the new table
      clone.appendTo('.result');
    }
  });
  
  // loop the second table
  $('#second tr').each( function() {
    var name = $(this).find('td:first').text(),
        resRow = $(".result td").filter(function() {
          return $(this).text() == name;
        }).closest("tr");

    // if the name doesn't exist, add the row
    if( resRow.length == 0 ) {
      $(this).clone().appendTo('.result');
    }
  });
});

table, td { border: 1px solid black; }
table { margin-bottom: 1em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>