Question

我正在使用这个html来显示我的表格。我循环遍历数据以显示多行。

<table id="myTable" class="table table-bordered">
   <thead>
    <tr>
       <th>Item</th>
       <th>Qty</th>
       <th>Price</th>
       <th>Action</th>
    </tr>
    </thead>
    <tbody>
       <?php  $srno=1;
            for ($x=0; $x < count($quotes[0]->workOrderLineItem); $x++ ) {?> 
               <tr>
               <td width="50%"><input type="text" name="detail[]" value="<?php echo $quotes[0]->workOrderLineItem[$x];?>" required=""</td>
               <td width="10%"><input type="number" name="qty[]" value="<?php echo $quotes[0]->qty[$x];?>" required=""</td>
               <td width="15%"><input type="number" name="price[]" value="<?php echo preg_replace("/[\$,]/", '', $quotes[0]->priceArray[$x]); ?>" required=""</td>
            <td width="12%"><div class="inline"><input type="button" id="addButton" class="btn btn-primary btn-xs" value="Add"/></div><div class="inline"><input type="button" id="deleteButton" class="btn btn-primary btn-xs" value="Delete"/></div>
           </tr>
          <?php } ?>

          </tbody>
         </table>

然后我使用此脚本添加和删除行

$(function(){
$("#addButton").click(function(){
    $(this).closest("tr").clone(true).appendTo("#myTable");
});

$("#deleteButton").click(function(){
    var x = $('#myTable tr').length;
    if(x == 2){

    } else {
         $(this).closest("tr").remove();
    }

});

}）;

每当我有一个表行时，这都可以正常工作，但是当我有多行时，附加行＆＃34;添加＆＃34;和＆＃34;删除＆＃34;按钮不起作用。只有第一行按钮才有效。能够从其他行中删除和添加行的最佳方法是什么？

Answer 1

你能告诉我$ quotes var的内容，以便在我的本地环境中重现你的问题吗？

谢谢，这是您应该使用的代码，我只是在$ quote var

中做了一些更改

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
</head>
<body>
<table id="myTable" class="table table-bordered">
   <thead>
    <tr>
       <th>Item</th>
       <th>Qty</th>
       <th>Price</th>
       <th>Action</th>
    </tr>
    </thead>
    <tbody>
       <?php  
       $quotes = [];
       $quotes[] = ['workOrderLineItem' => ["Color Change","Printed Wrap"], 'qty' => [3,2], 'price' => [267, 784] ];
       $srno=1;
            for ($x=0; $x < count($quotes[0]['workOrderLineItem']); $x++ ) {?> 
               <tr>
               <td width="50%"><input type="text" name="detail[]" value="<?php echo $quotes[0]['workOrderLineItem'][$x];?>" required=""</td>
               <td width="10%"><input type="number" name="qty[]" value="<?php echo $quotes[0]['qty'][$x];?>" required=""</td>
               <td width="15%"><input type="number" name="price[]" value="<?php echo preg_replace("/[\$,]/", '', $quotes[0]['price'][$x]); ?>" required=""</td>
            <td width="12%"><div class="inline"><input type="button" name="addButton" class="btn btn-primary btn-xs" value="Add"/></div><div class="inline"><input type="button" name="deleteButton" class="btn btn-primary btn-xs" value="Delete"/></div>
           </tr>
          <?php } ?>

          </tbody>
         </table>
         <script type="text/javascript">
            $(function(){
                      $("input[name='addButton']").on('click', function(){
                        $newElement = $(this).closest("tr").clone(true);

                      $("#myTable").append($newElement);
            });

            $("input[name='deleteButton']").click(function(){
                      var x = $('#myTable tr').length;
                      if(x == 2){

                      } else {
                          $(this).closest("tr").remove();
                      }

            });
        });
         </script>
</body>
</html>

Answer 2

从td中删除id

<td width="12%"><div class="inline"><input type="button" class="addButton btn btn-primary btn-xs" value="Add"/></div><div class="inline"><input type="button" class="deleteButton btn btn-primary btn-xs" value="Delete"/></div>

然后将点击选择器更改为$（＆＃34; .addButton＆＃34;）和$（＆＃34; .deleteButton＆＃34;）relativel

使用Javascript添加/删除表行

2 个答案: