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

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(){

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

        $('.clonetr:last').clone(true).appendTo("#addrow");

    });

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

        if($('.deleteButton').length > 1){

        

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

        }

        

    });

});

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

<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>

Answer 2

你的问题是在按钮调用之后。在您的代码中，您将获得所有“tr”并克隆它！好吧，现在，在调用 add 之后，将 this 与最接近（“tr”）一起使用，克隆它并在使用 append 之后。

像这样更改您的代码：

$(function(){

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

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

    });

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

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

    });

});

Answer 3

最接近第一个变化

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

到

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