使用jquery动态添加/删除行

我有一个需求动态地使用jquery添加/删除表行。使用jquery动态添加/删除行

我有一个带有2个文本框和2个按钮的表格行，一个按钮是添加的，其他按钮是删除的。

无论何时点击添加按钮，下一行应该使用2个文本框和2个按钮（添加/删除）使用Jquery创建。

任何建议周围将更多的赞赏。

感谢

来源

2011-09-20 TP_JAVA

很容易。您可以使用事件处理程序（例如：onClick（））并将一行添加到表中。同样，您可以在行中获取最后一个子项（DOM）并将其删除。你究竟在哪里卡住？你可以添加一个例子吗？ :) –

事情是这样的： http://jsfiddle.net/AWM44/

<html> 
    <body> 
     <table id="foo" border="1"> 
      <tr> 
       <td>Hello</td> 
       <td><input type="text></td> 
        <td><input type="text></td> 
       <td><input type="button" class="addButton" value="add"/></td> 
       <td><input type="button" class="deleteButton" value="delete"/></td> 
      </tr> 
     </table> 
    </body> 
</html> 

$(function(){ 
    $(".addButton").click(function(){ 
     $(this).closest("tr").clone(true).appendTo("#foo"); 
    }); 

    $(".deleteButton").click(function(){ 
     $(this).closest("tr").remove(); 
    }); 
});

来源

2011-09-20 02:41:59 aquinas

阿奎那...谢谢..我真的帮了我...它像一个魅力... –

有没有一种简单的方法来检测，只有1行仍然是，停止“删除”行动？一个简单的柜台似乎工作，但不知道是否有另一个更奇特的方式。 –

您可以通过执行此操作来检查表中有多少行：'$（this）.closest（“tbody”）。find（“tr”）.length' – aquinas

$('#theTable').delegate('.delete', 'click', function(){ 
    $(this).closest('tr').remove(); 
}) 
.delegate('.add', 'click', function(){ 
    $(this).closest('tr').clone().appendTo($(this).closest('tbody')); 
});

如果你没有一个tbody，和你的td s为所有直属的table，将其更改为$(this).closest('tr').clone().appendTo($(this).closest('table'));。

这里的小提琴：http://jsfiddle.net/Ke5Ss/

这可以通过缓存一些那些选择的进一步优化，但它应该让你在正确的方向开始......

来源

2011-09-20 02:41:04

感谢Josesph ...很快的回应....它现在可以工作... –

@ user948030 - 如果答案已解决您的问题，请点击旁边的复选标记以接受它，以便其他人来此后会知道这是正确的答案。 –

使用jquery动态添加/删除行

回答

相关问题