Question

我在

下面有一个字段集

<fieldset>
    <div class="panel panel-default">
        <div class="panel-heading clearfix">Collection photos</div>
            <div class="panel-body shopping-cart">
                <div class="row product-list title hidden-xs">
                    <div class="col-xs-4 col-sm-4">Product</div>
                    <div class="col-xs-6 col-sm-6 title">Description</div>
                    <div class="col-xs-1 center col-sm-1">Action</div>
                </div>
                <div class="row product-list">
                    <div class="col-xs-4 col-sm-4">
                        <a href="product.php">
                            <img src="images/products/1.jpg" class="img-responsive"  alt="product">
                        </a>
                    </div>
                    <div class="col-xs-6 col-sm-6 title">
                        <textarea id="txtDescription" rows="2">Photo Description</textarea>
                    </div>
                    <div class="col-xs-1 col-sm-1 center">
                        <label>Open
                            <i class="fa fa-folder-open-o fa-2x">
                                <input type="file" style="display: none">
                             </i>
                        </label>
                    </div>
                </div>
                <div class="row product-list grandtotal">
                    <div class="col-xs-4 col-sm-4">Total</div>
                    <div class="col-xs-6 col-sm-6 title">
                        <label for="lblPhotoTotal">0</label>
                    </div>
                    <div class="col-xs-1 center col-sm-1">
                       <a href="#" class="btn btn-primary" id="btnAdd">Add</a>
                    </div>          
                </div>
            </div>
       </div>
</fieldset>

此刻我有三行，第一行包含fieldset标题，第二行是默认的第一个字段。第三个包含按钮（即添加按钮）。当用户单击添加按钮时，我想添加与第二行类似的另一行。我希望行在包含我的添加按钮的最后一行之前。当我尝试下面的Jquery时，它似乎是选择我的fieldset到panel-body和shopping-cart类。

$('fieldset').find('.panel-body ,.shopping-cart');

然而，我的新行没有追加。请问每次单击按钮时，如何在最后一行之前追加第二行的新实例？即

<div class="row product-list">
    <div class="col-xs-4 col-sm-4">
        <a href="product.php">
            <img src="images/products/1.jpg" class="img-responsive"  alt="product">
        </a>
    </div>
    <div class="col-xs-6 col-sm-6 title">
         <textarea id="txtDescription" rows="2">Photo Description</textarea>
    </div>
    <div class="col-xs-1 col-sm-1 center">
        <label>Open
            <i class="fa fa-folder-open-o fa-2x">
                <input type="file" style="display: none">
            </i>
        </label>
    </div>
</div>

Answer 1

我就是这样做的：

$("#btnAdd").click(function() {
  $($(".shopping-cart").children().get(1)).clone().insertBefore($(".shopping-cart").children().last());
});

Here is the JSFiddle demo

Answer 2

我在jsFiddle中做了一点example。它只是向您展示它是如何工作的。

<强> HTML

<table>
<thead>
  <tr>
    <th>Date</th>
    <th>Name</th>
    <th>Gender</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>05/01/2016</td>
    <td>John Doe</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>05/01/2016</td>
    <td>Jane Doe</td>
    <td>Female</td>
  </tr>
  <tr>
    <td colspan="3" class="button">
      <button id="newRow">
      add row
      </button>
    </td>
  </tr>
</tbody>
</table>

一些CSS

table {
  border: 2px solid black;
}

th {
  border-bottom: 2px solid black;
}

.button {
  text-align: center;
}

button {
  width: 100%;
}

<强>的jQuery

$("#newRow").click(function() {
  $(this).parents("tr").before($(this).parents("tr").prev().clone());
})

您只需克隆上一个行元素（<tr>）并将其放在按钮所在的行之前。.parents("tr")找到距离最近的父<tr> - element）和.before()在您使用它的元素之前放置您想要的任何内容（在您的情况下，带有您的按钮的行）

<强>更新优化我的代码，读错了问题。我认为这只是附加一个新行，而不是克隆前一行。

Answer 3

我会选择CSS选择器来复制一个空白的新行。

// Get row while its blank
var row = $('.product-list:nth-child(2)').clone();

// Copy blank row everytime the user clicks
$('#btnAdd').on('click', function () {
    row.clone().insertBefore('.product-list:last-child')
});

如果您想复制上一行，可以使用此

$('#btnAdd').on('click', function () {
    $('.product-list:nth-last-child(2)').clone().insertBefore('.product-list:last-child');
});

JQuery

3 个答案: