且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-12-04 12:08:52

就像这样吗?我不知道您将在哪里取值'Mango'和'Pear'..
http:// jsfiddle.net/vPatQ/

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();
});

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