克隆表行限制多达两行？

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/