如何在Jquery表上动态显示按钮

Question

在表格中，用户可以通过单击“删除”按钮删除行 用户无法删除所有行，一行必须至少存在

因此，我正在检查表格长度

if($("#dynamicTable1 tr").length==2) 
  {

        $("#dynamicTable1 tr").find('td:last-child').hide();
  }

当动态地向表中添加新行时，如何添加/ 显示隐藏的删除按钮以前

https://jsfiddle.net/qvtL6qf2/355/

＆＃13;

＆＃13;

jQuery(document).ready(function() {
  var id = 0;
  jQuery("#addrow").click(function() {
    id++;
    var row = jQuery('.samplerow tr').clone(true);
    row.find("input:text").val("");
    row.attr('id', id);
    row.appendTo('#dynamicTable1');
    return false;
  });

  $('.remove').on("click", function() {

    $(this).closest('tr').remove();
    if ($("#dynamicTable1 tr").length == 2) {

      $("#dynamicTable1 tr").find('td:last-child').remove();
    }



  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dynamicTable1">
  <thead>
    <th>Id</th>
    <th>Name</th>
    <th>Age</th>
    <th>Place</th>
    <th>Skill</th>
  </thead>
  <tr>
    <td><input type="text" id="fld1" /></td>
    <td><input type="text" id="fld2" /></td>
    <td><input type="text" id="fld3" /></td>
    <td><input type="text" id="fld4" /></td>
    <td><input type="text" id="fld5" /></td>
    <td><button class="remove">Remove</button></td>
  </tr>


  <tr>
    <td><input type="text" id="fld1" /></td>
    <td><input type="text" id="fld2" /></td>
    <td><input type="text" id="fld3" /></td>
    <td><input type="text" id="fld4" /></td>
    <td><input type="text" id="fld5" /></td>
    <td><button class="remove">Remove</button></td>
  </tr>

</table>

<input type="button" id="addrow" value="Add New Row" />

<table class="samplerow" style="display:none">
  <tr>
    <td><input type="text" id="fld1" /></td>
    <td><input type="text" id="fld2" /></td>
    <td><input type="text" id="fld3" /></td>
    <td><input type="text" id="fld4" /></td>
    <td><input type="text" id="fld5" /></td>
    <td><button class="remove">Remove</button></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不是删除删除按钮，而是隐藏它们。然后当您添加新行时，再次显示它们。

＆＃13;

＆＃13;

PayPal_Connection_OK

＆＃13;

jQuery(document).ready(function($) {
  var id = 0;
  var $dynamicTable = $('#dynamicTable1');
  
  $("#addrow").on('click', function() {
    id++;
    var row = $('.samplerow tr').clone(true);
    row.find("input:text").val("");
    row.attr('id', id);
    $dynamicTable.append(row);
    $dynamicTable.find('tr td:last-child').show();
    return false;
  });

  $dynamicTable.on('click', '.remove', function() {
    $(this).closest('tr').remove();
    
    if ($dynamicTable.find('tr').length < 3) {
      $dynamicTable.find('tr td:last-child').hide();
    }
  });
});

＆＃13;

＆＃13;

＆＃13;