在循环jquery中动态创建和动态

Question

我有这个jquery代码循环遍历table1上的所有行。

$('#table_1').find('tr').each(function (i, el) {
   var $tds = $(this).find('td');
   var test1 = $tds.eq(0).text();
   var test2 = $tds.eq(1).text();
   var test3 = $tds.eq(2).text();
   console.log (test1 + test2 + test3);
});

这是我将在其中传递table1中的行值的表。我需要做的是动态添加行并在表中传递值，直到循环结束。我该如何使用jQuery？

<table
  style="width: 540px; display: none; float: left; border-collapse: collapse;"
  border="1"
>
  <tbody>
    <tr>
      <td>&nbsp;FROM:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;ADDRESS:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CONTACT NUMBER:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr style="border: none; height: 20px;">
      <td style="border: none; text-align: center; height: 20px;" colspan="2">
        <strong></strong>
      </td>
    </tr>
    <tr>
      <td>&nbsp;TO:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;ADDRESS:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;BARANGAY:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CITY &amp; PROVINCE:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CONTACT NUMBER:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;PRODUCT &amp; PRICE</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr style="border: none; height: 18px;">
      <td style="border: none; text-align: center; height: 18px;" colspan="2">
        &nbsp;
      </td>
    </tr>
  </tbody>
</table>

我希望有人能帮助我。

Answer 1

$("#AddRow").on("click", function() {
  $("#tbl").append("<tr><td>Blah</td><td>Bll</td></tr>")
  for (let i = 0; i < 3; i++) {
    $("#tbl").append("<tr><td>BlahLoop</td><td>Bll Loop</td></tr>")
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id=AddRow>Click To Add
</button>
<table id="tbl" style="width: 540px; ; float: left; border-collapse: collapse;" border="1">
  <tbody>
    <tr>
      <td>&nbsp;FROM:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;ADDRESS:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CONTACT NUMBER:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr style="border: none; height: 20px;">
      <td style="border: none; text-align: center; height: 20px;" colspan="2"><strong></strong></td>
    </tr>
    <tr>
      <td>&nbsp;TO:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;ADDRESS:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;BARANGAY:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CITY &amp; PROVINCE:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CONTACT NUMBER:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;PRODUCT &amp; PRICE</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr style="border: none; height: 18px;">
      <td style="border: none; text-align: center; height: 18px;" colspan="2">&nbsp;</td>
    </tr>
  </tbody>
</table>

Answer 2

您可以按照下面的方法动态解决此问题。

从table_1迭代该值并将其推入数组，然后单击按钮，可以将这些表详细信息附加到下面的另一个表中

///假设数组“值”由table_1数据组成。

    let value = ['Bathri','Coimbatore','23'];
    let header = ["Name","Address","Age"];
    
    $("#AddRow").on("click", function() {
    
    for(let v=0; v < 3; v++){
    	$("#tbl").append("<tr><td>"+header[v]+"</td><td>"+value[v]+"</td></tr>")  
    }
      
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id=AddRow>Click To Add
</button>
<table id="tbl" style="width: 540px; ; float: left; border-collapse: collapse;" border="1">
  <tbody>
    <tr>
      <td>&nbsp;FROM:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;ADDRESS:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CONTACT NUMBER:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr style="border: none; height: 20px;">
      <td style="border: none; text-align: center; height: 20px;" colspan="2"><strong></strong></td>
    </tr>
    <tr>
      <td>&nbsp;TO:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;ADDRESS:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;BARANGAY:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CITY &amp; PROVINCE:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CONTACT NUMBER:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;PRODUCT &amp; PRICE</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr style="border: none; height: 18px;">
      <td style="border: none; text-align: center; height: 18px;" colspan="2">&nbsp; 
</td>
    </tr>
  </tbody>
</table>