Merge two html tables with jQuery/Javascript

Question

here is my table

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

What I like to do is:

1) For tables with class .merge get text of each first tr td elements (Mick Jagger, David Bowie, Ronnie Wood, Mick Jagger, Lenny Kravitz)

2) If any text matches text in second table (in our example Mick Jagger, but in practice matched elements could be hundrets). Get whole tr and append it into .result tabble. First td element remains the same - mick jagger and sum each next td elemnt 30 + 20 next td going to be 50 + 50, next 50 + 50.

3) If text do not matches second table, append this tr as it is into .result table. So new row going to be David Bowie 21 45 21. Next one Ronnie Wood 45 78 42 and so on.

Here is function what I created but I fell that there is several errors in it. I cant create better function.

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

I've made you this script.

I've commented the code to explain how it works.

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