Merge two html tables with jQuery/Javascript
<p>here is my table</p>

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

      &lt;tr&gt;
        &lt;td&gt;Lenny Kravitz&lt;/td&gt;
        &lt;td&gt;45&lt;/td&gt;
        &lt;td&gt;78&lt;/td&gt;
        &lt;td&gt;42&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;


    &lt;table class="result"&gt;
&lt;/table&gt;
</code></pre>

<p>What I like to do is:</p>

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

<p>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. </p>

<p>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.</p>

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

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

});
</code></pre>