HTML表格“添加行”或“删除行”按钮栏

我需要一种方法来添加或删除下面的另一行的行我的HTML表格。我使用dom，并且可以轻松地添加和删除行，但是当我尝试使用可动态添加和删除行的按钮列时，问题就出现了。HTML表格“添加行”或“删除行”按钮栏

例如：

| Item Type |  Item  | Add/Remove Item 
==================================================== 
    | Fruit > |  Apple | [ Add new ] 
---------------------------------------------------- 
    |    |  Mango | [ Remove ] 
---------------------------------------------------- 
    |    |  Pear  | [ Remove ] 
----------------------------------------------------

在右列中的[Add new]和[Remove]条目的按钮。单击一个[Remove]按钮将删除该行（删除梨或芒果行）。点击[Add new]按钮将添加一个新项目（一个新的水果）。

如果我指定按钮的HTML，并添加基于一个onClick新行，我不能想办法来跟踪哪一行的按钮，点击从添加新的一个。我能想到的最好方法是有一个数组跟踪所有项目类型和它们在哪一行，然后将该项目的ID或名称传递到onClick()的方法中，但这似乎很容易出错并且很麻烦。

为了解决这个问题，我愿意考虑任何解决方案（jQuery插件，javascript代码，任何东西）。有人能指出我完成这个最好的方法吗？

来源

2012-02-16 John Leehey

有对这种技术的负载，jQuery有一对夫妇好的桌面插件;但到目前为止显示你的工作可能会更好。在这里设置一个小提琴可能会有所帮助：http://jsfiddle.net/ – 2012-02-16 00:58:53

是否这样？我不知道你要去哪里拿值“芒果”和“鸭梨” .. http://jsfiddle.net/vPatQ/

$('.AddNew').click(function(){ 
    var row = $(this).closest('tr').clone(); 
    row.find('input').val(''); 
    $(this).closest('tr').after(row); 
    $('input[type="button"]', row).removeClass('AddNew') 
           .addClass('RemoveRow').val('Remove item'); 
}); 

$('table').on('click', '.RemoveRow', function(){ 
    $(this).closest('tr').remove(); 
});

的HTML代码

<table> 
    <tr><td>Item Type</td><td>Item</td><td>Add/Remove Item</td></tr> 
    <tr><td><input type='text' value='Fruit >'></td> 
     <td><input type='text' value='Apple'></td> 
     <td><input type='button' class='AddNew' value='Add new item'></td></tr> 
</table>

来源

2012-02-16 01:27:14 Cheery

这是完美的，正是我期待的，谢谢！ – 2012-02-16 18:18:25

HTML表格“添加行”或“删除行”按钮栏

回答

相关问题