使用jQuery/Javascript合并两个html表 [英] Merge two html tables with jQuery/Javascript

问题描述

这是我的桌子

    <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)的文本

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)如果有任何文本与第二个表中的文本匹配(在我们的示例中为Mick Jagger，但实际上匹配的元素可以是Hundrets).获取整个tr并将其附加到.result表中.第一个td元素保持不变-米克·贾格尔(Mick jagger)，然后将每个下一个td元素加和30 + 20，下一个td将为50 + 50，下一个50 +50.

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)如果文本与第二个表不匹配，请将此tr原样附加到.result表中.因此，新的一行将是David Bowie 21 45 21.接下来的是Ronnie Wood 45 78 42，依此类推.

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

});

推荐答案

我为您制作了此脚本.

我已经注释了代码以解释其工作原理.

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>

这篇关于使用jQuery/Javascript合并两个html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！