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表格「添加行」或「刪除行」按鈕欄

回答

相關問題