按添加按钮后我的行添加多次

Question

在按下添加按钮之前，它已经显示了一行，其中包含三个输入框和一个删除按钮，当我add按下按钮时，它添加了一行现在我有两行，当我按下添加按钮时，second time它显示4 rows ，按下后third time它显示8 rows

我的代码：

  <div class="row">

       <div class="col-12">

        <h3>Add Video</h3>

         <form id="insertvideo" method="post">

         <table id="addrow" width="100%">

          <td><input type="button" class="btn btn-success addButton col-3 offset-1" value="add"/></td>

          <tr class="clonetr">

                <td>Video Title<input type="text" id="videotitle" name="videotitle[]" class="form-control"></td>

                <td>Video description<input type="text"  id="videodesc" name="videodesc[]" class="form-control"></td>

                <td>Video Links<input type="text"  id="videolink" name="videolink[]" class="form-control"></td>

                <td><input type="button" class="btn btn-danger deleteButton" value="delete"/></td>

          </tr>

         </table>

         </form>

       </div>

     </div>

<script>

   $(function(){

    $(".addButton").click(function(){

        $('.clonetr').closest("tr").clone(true).appendTo("#addrow");

    });

    $(".deleteButton").click(function(){

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

    });

});

</script>

add按下按钮后，我只想添加一行。

Answer 1

因为您每次都克隆所有现有的tr. 只需克隆最后一个tr并附加它。另一点是当有多个时你必须显示删除按钮tr。因为如果您删除所有 tr ，则无法使用add按钮进行克隆。$(function(){&nbsp; &nbsp; $(".addButton").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; $('.clonetr:last').clone(true).appendTo("#addrow");&nbsp; &nbsp; });&nbsp; &nbsp; $(".deleteButton").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; if($('.deleteButton').length > 1){&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(this).closest("tr").remove();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="row">&nbsp; &nbsp; &nbsp; &nbsp;<div class="col-12">&nbsp; &nbsp; &nbsp; &nbsp; <h3>Add Video</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<form id="insertvideo" method="post">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<table id="addrow" width="100%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="button" class="btn btn-success addButton col-3 offset-1" value="add"/></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr class="clonetr">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Video Title<input type="text" id="videotitle" name="videotitle[]" class="form-control"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Video description<input type="text"&nbsp; id="videodesc" name="videodesc[]" class="form-control"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Video Links<input type="text"&nbsp; id="videolink" name="videolink[]" class="form-control"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="button" class="btn btn-danger deleteButton" value="delete"/></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</form>&nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;</div>

Answer 2

你的问题是在按钮调用之后。在您的代码中，您将获得所有“tr”并克隆它！好吧，现在，在调用 add 之后，将 this 与最接近（“tr”）一起使用，克隆它并在使用 append 之后。像这样更改您的代码：$(function(){&nbsp; &nbsp; $(".addButton").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; $(this).closest("tr").clone(true).appendTo("#addrow");&nbsp; &nbsp; });&nbsp; &nbsp; $(".deleteButton").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; $(this).closest("tr").remove();&nbsp; &nbsp; });});

Answer 3

最接近第一个变化$('.clonetr').closest("tr").clone(true).appendTo("#addrow");到$('.clonetr').first("tr").clone(true).appendTo("#addrow");