克隆錶行限制多達兩行？

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/