使用jquery添加，删除动态行

Question

我已经完成添加和删除html，jquery中的动态行。

jsfiddle.net/gansai/p5QwC/1/

HTML：

<form action="grading.php" method="post">    
<table width="100%" id="tableRealizzazione"> 
    <tr> 
     <th></th> 
     <th style="padding:12px;text-align:center;">Serial No</th> 
     <th style="padding:12px;text-align:center;">Personale</th> 
     <th style="padding:12px;text-align:center;">Percentage</th> 
     <th style="padding:12px;text-align:center;">Marketing point</th> 
     <th style="padding:12px;text-align:center;">Add/Remove</th> 
    </tr> 

    <tr class="even"> 
     <td></td> 
     <td> 
      <input type="text" name="serial[]" class="add increment" value="1"> 
     </td> 
     <td style="padding:12px;"> 
      <input type="text" value="" name="Personale[]"> 
     </td> 
     <td style="padding:12px;"> 
      <input type="text" name="from[]" size="5%"> - 
      <input type="text" name="to[]" size="5%"> % 
     </td> 
     <td style="padding:12px;"> 
      <input type="text" class="totaliCostiGestione" name="marketpt[]"> 
     </td> 
     <td style="padding:12px;"> 
      <input type="text" name="programid[]" class="add" value="34" size="10%"> 
     </td> 
     <td style="padding:12px;"> 
      <input type="button" class="addnew add" value="+" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="submit" name="submit" value="submit"> 
     </td> 
    </tr>      
</table> 

的jQuery：

$('.addnew').live('click', function(){ 
var thisRow = $(this).parent().parent(); 
newRow = thisRow.clone(true).insertAfter(thisRow); 
newRow.find('input:not(.add)').val(""); 

$(this).removeClass('addnew').addClass('remove'); 
    $(this).val("-"); 
    newRow.find('input.increment').val(parseInt(thisRow.find('input.increment').val())+1); 
}); 

$('.remove').live('click', function(){ 
    $(this).parent().parent().remove(); 
}); 

但我想添加/删除操作相同的按钮。而不是将删除图标显示到上一行。

任何人都可以建议吗？

Answer 1

我相信这是你正在寻找的东西，但让我知道如果它不是。

$('.addnew').live('click', function(){ 
    var thisRow = $(this).parent().parent(); 
    newRow = thisRow.clone(true).insertAfter(thisRow); 
    newRow.find('input:not(.add)').val(""); 

    newRow.find('.addnew').removeClass('addnew').addClass('remove'); 
    newRow.find('.remove').val("-"); 
    newRow.find('input.increment').val(parseInt(thisRow.find('input.increment').val())+1); 
}); 

$('.remove').live('click', function(){ 
    $(this).parent().parent().remove(); 
}); 

这使第一行保持+，并将按钮添加到克隆行。

http://jsfiddle.net/p5QwC/3/作为一个工作的例子。

UPDATE

假设你不想初始行是可拆卸的，这也许是更多，你在找什么。 http://jsfiddle.net/p5QwC/10/