使用 Jquery 添加和删除表行

Question

快完成了，但我不知道为什么它没有按照预期的方式工作。功能很简单，只需单击最后一行即可添加一行，然后单击左侧的按钮即可删除一行。

添加工作正常，删除也可以，但是当您删除最后一行时，您无法再次添加。你们能帮我吗？这是代码：

$(document).ready(function() {

  //Add Button

  $(".fa-plus").click(function() {

    var idTable = $(this).closest('table').attr('id');

    $('#' + idTable + ' tbody>tr:last').clone(true).insertAfter('#' + idTable + ' tbody>tr:last');

    //$('#' + idTable + ' tbody>tr:last #name').val('');

    $(this).replaceWith('');

    return false;

  });

  //Delete Butotn

  $(".fa-trash").click(function() {

    var idTable = $(this).closest('table').attr('id');

    var rowCount = $('#' + idTable + ' tr').length;

    if (rowCount > 2) {

      // If is the last Row

      if (!$(this).closest('tr').next().length) {

        $(this).closest("tr").remove();

        $('#' + idTable + ' tbody>tr:last #add').append("<i class='fa fa-plus fa-lg text-primary'></i>");

      } else {

        $(this).closest("tr").remove();

      }

    } else {

      alert('Dont delete the only row');

    }

  });

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tbl_PilotOption" class="table table-bordered table-striped" style=" width: 100%;">

  <thead>

    <tr>

      <th style="width:46px;"></th>

      <th></th>

      <th style="width: 35%;"></th>

      <th style="width:46px;"></th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td class="text-center" width="30px"><a id="delete"><i class="fa fa-trash ml-2"></i></a></td>

      <td><input class="form-control" /></td>

      <td><input class="form-control" /></td>

      <td><a href="#" id="add"><i class="fa fa-plus fa-lg text-primary"></i></a></td>

    </tr>

  </tbody>

</table>

Answer 1

问题是，当您删除该行时，您也删除了单击处理程序。所以而不是$(".fa-plus").click(function() {...使用$('table').on("click", ".fa-plus", function() {....$(document).ready(function() {&nbsp; //Add Button&nbsp; $('table').on("click", ".fa-plus", function() {&nbsp; &nbsp; var idTable = $(this).closest('table').attr('id');&nbsp; &nbsp; $('#' + idTable + ' tbody>tr:last').clone(true).insertAfter('#' + idTable + ' tbody>tr:last');&nbsp; &nbsp; //$('#' + idTable + ' tbody>tr:last #name').val('');&nbsp; &nbsp; $(this).replaceWith('');&nbsp; &nbsp; return false;&nbsp; });&nbsp; //Delete Butotn&nbsp; $(".fa-trash").click(function() {&nbsp; &nbsp; var idTable = $(this).closest('table').attr('id');&nbsp; &nbsp; var rowCount = $('#' + idTable + ' tr').length;&nbsp; &nbsp; if (rowCount > 2) {&nbsp; &nbsp; &nbsp; // If is the last Row&nbsp; &nbsp; &nbsp; if (!$(this).closest('tr').next().length) {&nbsp; &nbsp; &nbsp; &nbsp; $(this).closest("tr").remove();&nbsp; &nbsp; &nbsp; &nbsp; $('#' + idTable + ' tbody>tr:last #add').append("<i class='fa fa-plus fa-lg text-primary'></i>");&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $(this).closest("tr").remove();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; alert('Dont delete the only row');&nbsp; &nbsp; }&nbsp; });});<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="tbl_PilotOption" class="table table-bordered table-striped" style=" width: 100%;">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th style="width:46px;"></th>&nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; &nbsp; <th style="width: 35%;"></th>&nbsp; &nbsp; &nbsp; <th style="width:46px;"></th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="text-center" width="30px"><a id="delete"><i class="fa fa-trash ml-2"></i></a></td>&nbsp; &nbsp; &nbsp; <td><input class="form-control" /></td>&nbsp; &nbsp; &nbsp; <td><input class="form-control" /></td>&nbsp; &nbsp; &nbsp; <td><a href="#" id="add"><i class="fa fa-plus fa-lg text-primary"></i></a></td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>