时间戳

首页 > 解决方案 > 如何使用 jquery clone 增加每次点击的 TR？

javascript - 如何使用 jquery clone 增加每次点击的 TR？

问题描述

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

我还想增加每个增量的计数。

我在下面给出的尝试： -

 $('.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>

我该如何解决？

标签： javascriptjquery

解决方案

 $('.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());
        });

推荐阅读