jquery - 克隆表行限制为两行？

Question

我正在尝试向我的表中动态添加另一行，但它只添加一行并且不会再添加。

这是html：

<table class="pretty property_units" style="width:800px;">
<thead>
<tr>
<th>Bedroom</th>
<th>Bathroom</th>
<th>Square Feet</th>
<th>Price</th>
<th>Available</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="rows">
    <td><input type='text' name='bedroom[]' class='input-small'></td>
    <td><input type='text' name='bath[]' class='input-small'></td>
    <td><input type='text' name='sqrt[]' class='input-small'></td>
    <td><input type='text' name='price[]' class='input-small'></td>
    <td>
        <select name='avail[]' class='input-small'>
        <option value='yes'>Yes</option>
        <option value='no'>No</option>
        </select>
    </td>
    <td><button class='btn btn-danger btn-small'>remove</button></td>
</tr>
</tbody>
</table>

这是js：

<script type="text/javascript">
$(document).ready(function() {
    var tblrow = $('table.property_units tr.rows:first-child').clone();
    $(".addrow").click(function() {
    $("table.property_units").append(tblrow);
    });
});
</script>

请注意我没有在追加中写出表格行吗？我不想写出来，所以请不要将其添加为解决方案。它使代码非常混乱。

Answer 1

您正在将该行附加到表中，但您应该将其附加到<tbody>：

$("table.property_units tbody").append(tblrow);

此外，:first-child是一个无效的选择器。您打算使用:first：

$('table.property_units tr.rows:first').clone();

此外，将克隆移动到单击功能中：

$(".addrow").click(function() {
    var tblrow = $('table.property_units tr.rows:first').clone();
    $("table.property_units tbody").append(tblrow);
});

http://jsfiddle.net/2ygGt/4/