javascript - HTML 表格 "Add Row"或 "Remove Row"按钮列

Question

我需要一种方法来在我的 html 表格中的另一行下方添加或删除一行。我正在使用 dom，可以很容易地添加和删除行，但是当我尝试使用一个按钮列来动态添加和删除行时，问题就出现了。

例如:

    |  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 代码等)。有人可以指出实现此目标的最佳方法吗？

Answer 1

像这样？我不知道你要在哪里取值“芒果”和“梨”.. 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>