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

发布于 2025-01-06 05:17:02 字数 906 浏览 0 评论 0原文

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

例如：

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

右列中的[添加新]和[删除]条目是按钮。单击[Remove]按钮将删除该行（删除梨或芒果行）。单击[添加新]按钮将添加一个新项目（新水果）。

如果我为按钮指定了 html 并根据 onClick 添加了新行，我想不出一种方法来跟踪按钮单击哪一行来添加新行。我能想到的最好方法是使用一个数组来跟踪所有项目类型及其所在行，然后将项目的 id 或名称传递到 onClick() 的方法中，但这似乎容易出错且混乱。

为了解决这个问题，我愿意考虑任何解决方案（jquery 插件，javascript 代码，任何东西）。有人可以指出我实现此目标的最佳方法吗？

原文

I need a way to add or remove a row below another row in my html table. I'm using the dom, and can add and remove rows easily enough, but the problem comes up when I try to have a button column that adds and removes rows dynamically.

For example:

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

The [Add new] and [Remove] entries in the right column are buttons. Clicking a [Remove] button would delete the row (remove the pear or mango row). Clicking the [Add new] button would add a new Item (a new fruit).

If I specified the html for the button and added a new row based on an onClick, I can't think of a way to keep track of which row the button clicked from to add the new one. The best way I can think of is to have an array that keeps track of all the item types and what row they are on, then pass the id or name of the item into the method from onClick(), but this seems error-prone and messy.

To solve this, I'm willing to consider any solution (jquery plugin, javascript code, anything). Can someone point me to the best way to accomplish this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

何以笙箫默 2025-01-13 05:17:02

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

Like this? I do not know where you are going to take values 'Mango' and 'Pear'..
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();
});

for html code

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

回复收藏 0 原文

~没有更多了~