使用 jQuery 向表中动态添加行

Question

我有这个表，我希望能够使用 Jquery 动态地向它添加行，但到目前为止我已经失败了，我已经为添加的行设置了一个循环，我只需要它附带的脚本. （我使用的是 MVC 模式设计）

我的循环代码：

<?php
     $viewTableRows = array_merge($device->tableRows, array(new tableRow()));
     foreach ($viewTableRows as $i => $row) { 
  ?>

td 示例：

<td>
       <?php echo $htmlRenderer->getProperHtmlForInputText(
           SheetTableOperator::SHEET_POSITION .  "[$i]",
           $row->position);
       ?>
</td>

Answer 1

使用此代码动态添加数据。

        <button id='mybtn'>Add row</button>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>

<script  type="text/javascript">
           $(document).on("click",'#mybtn',function(){  

                 var $mytable = $('#table').find("tbody");

                  $last_row = $mytable.find("tr:last");

                  $new_row = $last_row.clone();

                  $last_row.after($new_row);

           });    


</script>

Answer 2

1. 方法一

   var currentEletd;
   
   $('table').append("<tr class='tr'></tr>").after(
       function() {
           var ele = $('.tr', this);
           currentEletd = (ele[ele.length - 1]);
   });
   
   $(currentEleth).append(("<td>" + [your value] + "</td>"));
   

2. 方法二

   mytbody=$("<tbody></tbody>");
   mytr = $("<tr></tr>");
   mytr.append("<td></td>");
   
   $('table').append(mytbody);