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>

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

1 个答案: