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/

克隆表行最多限制为两行？

1 个答案: