HTML 表格“添加行”或“删除行”按钮列答案

【问题标题】：HTML table "Add Row" or "Remove Row" button columnHTML 表格“添加行”或“删除行”按钮列
【发布时间】：2012-02-16 00:56:54
【问题描述】：

我需要一种方法来在我的 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 代码等）。有人可以指出完成此任务的最佳方法吗？

【问题讨论】：

这方面有很多技术，JQuery 有几个很好的表格插件；但最好展示你迄今为止的工作。在此处设置小提琴可能会有所帮助：jsfiddle.net

标签： javascript html dom

【解决方案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>

【讨论】：