用jQuery/Javascript合并两个html表

Merge two html tables with jQuery/Javascript

本文关键字：两个 html jQuery Javascript 合并更新时间：2023-09-26

这是我的表

    <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元素的文本(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)如果文本与第二个表不匹配，则将此文本按原样附加到.result表中。新一排是大卫·鲍伊21,45,21。下一个是罗尼·伍德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);
});

我给你做了这个脚本。

我已经注释了代码来解释它是如何工作的。

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