时间戳

首页 > 解决方案 > 在循环jquery中动态创建&

jquery - 在循环jquery中动态创建&

问题描述

我有这个 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>

我希望有人能帮助我。

标签： jquery

解决方案

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

推荐阅读