Javascript HTML表格“；添加行“；或；删除第行“；按钮栏

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

例如：

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

右侧列中的

[添加新]

和

[删除]

项是按钮。单击

[Remove]

按钮将删除该行（删除pear或mango行）。单击

[addnew]

按钮将添加一个新项目（一个新水果）

如果我为按钮指定了html并基于onClick添加了一个新行，我想不出一种方法来跟踪按钮从哪一行单击以添加新行。我能想到的最好的方法是使用一个数组来跟踪所有的项类型以及它们所在的行，然后将项的id或名称从

onClick（）

传递到方法中，但这似乎容易出错且混乱

---

为了解决这个问题，我愿意考虑任何解决方案（jQuery插件，JavaScript代码，任何东西）。有人能告诉我实现这一目标的最佳方法吗？

像这样？我不知道你要把“芒果”和“梨”带到哪里去。。

用于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>

项目类型项目添加/删除项目

这方面有很多技术，JQuery有几个很好的表插件；但最好是展示你目前的工作。在这里摆好小提琴可能会有帮助：

<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>