如何使用jquery clone提高每次点击的TR？

Question

我有一张表格，单行，我想在每次点击时增加一行，但是当我第一次点击时，它的工作正常，但是当我第二次点击时，它增加两次。

我也想在每次增加时增加计数。

以下是我尝试过的内容：-

 $('.add-more-row').click(function () {
                var $repeatRow = $('.table12 tbody tr');
                $repeatRow.after($repeatRow.clone());
            });

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">
            <div class="col-md-12">
               <table class="table table-bordered table12">
                   <thead>
                       <tr>
                           <th></th>
                           <th>BODY PART(S):</th>
                           <th>AREA AFFECTED:</th>
                           <th>SPECIFIC AREA:</th>
                           <th>PAIN SCALE:</th>
                       </tr>
                   </thead>
                   <tbody>
                       <tr>
                           <td>1</td>
                           <td>
                               <select class="form-control">
                                   <option>Select</option>
                                   <option>1</option>
                               </select>
                           </td>
                           <td>
                               <select class="form-control">
                                   <option>Select</option>
                                   <option>1</option>
                               </select>
                           </td>
                           <td>
                               <select class="form-control">
                                   <option>Select</option>
                                   <option>1</option>
                               </select>
                           </td>
                           <td>
                               <select class="form-control">
                                   <option>Select</option>
                                   <option>1</option>
                               </select>
                           </td>
                       </tr>
                   </tbody>
               </table>

                <button class="btn btn-primary add-more-row">
                    <i class="fa fa-plus"></i>
                    Add More Rows
                </button>
            </div>

        </div>

我该如何解决？

Answer 1

 $('.add-more-row').click(function () {
                var $repeatRow = $('.table12 tbody tr').last();
                $repeatRow.after($repeatRow.clone());
            });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">
            <div class="col-md-12">
               <table class="table table-bordered table12">
                   <thead>
                       <tr>
                           <th></th>
                           <th>BODY PART(S):</th>
                           <th>AREA AFFECTED:</th>
                           <th>SPECIFIC AREA:</th>
                           <th>PAIN SCALE:</th>
                       </tr>
                   </thead>
                   <tbody>
                       <tr>
                           <td>1</td>
                           <td>
                               <select class="form-control">
                                   <option>Select</option>
                                   <option>1</option>
                               </select>
                           </td>
                           <td>
                               <select class="form-control">
                                   <option>Select</option>
                                   <option>1</option>
                               </select>
                           </td>
                           <td>
                               <select class="form-control">
                                   <option>Select</option>
                                   <option>1</option>
                               </select>
                           </td>
                           <td>
                               <select class="form-control">
                                   <option>Select</option>
                                   <option>1</option>
                               </select>
                           </td>
                       </tr>
                   </tbody>
               </table>

                <button class="btn btn-primary add-more-row">
                    <i class="fa fa-plus"></i>
                    Add More Rows
                </button>
            </div>

        </div>

您运行此js，

       $('.add-more-row').click(function () {
            var $repeatRow = $('.table12 tbody tr');
            $repeatRow.after($repeatRow.clone());
        });

先单击按钮，然后选择1行。

但是首先，再次单击按钮，添加了多行。

更改您的js。

       $('.add-more-row').click(function () {
            var $repeatRow = $('.table12 tbody tr').last();
            $repeatRow.after($repeatRow.clone());
        });