从原始行插入表行和删除按钮

问题描述 投票:1回答:3

我有一个带有最初1行输入字段的表的表单。用户可以单击“新建行”按钮以获取另一行,其中包含空输入字段。这留下了每行的“New Row”按钮的多个副本 - 我想删除除最近创建的“New Row”按钮之外的所有按钮(即输入字段的最后一行中的按钮)。

我在以下位置设置了一个示例JSFiddle:

http://jsfiddle.net/fmdataweb/vRe9v/2/

有什么东西可以添加到现有的js中,删除点击的按钮,同时将新创建的按钮留在新行中?这是Javascript:

var table = $( '#nextYear' )[0];

$( table ).delegate( '#button2', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
   $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});

javascript jquery html-table
3个回答
1
投票

使用$(this).remove(); jQuery $(this)如果控制代表控件触发了哪个事件。您可以使用remove()方法删除从dom点击的按钮

Live Demo

var table = $('#nextYear')[0];

$(table).delegate('#button2', 'click', function() {

    var thisRow = $(this).closest('tr')[0];
    $(thisRow).clone().insertAfter(thisRow).find('input:text').val('');
    $(this).remove();
});​

1
投票

您可以使用jQuery remove()从DOM中删除匹配元素集。

在您处于按钮单击事件中的情况下,this是引用DOM中按钮对象的内容。

this转换为jQuery对象并在其上调用remove(),如下所示:

$(this).remove();

完成新代码:

var table = $('#nextYear')[0];

$(table).delegate('#button2', 'click', function() {
    var thisRow = $(this).closest('tr')[0];
    $(thisRow).clone().insertAfter(thisRow).find('input:text').val('');

    $(this).remove(); // remove button that was clicked
});​ 

DEMO


1
投票

试试这个:DEMO:http://jsfiddle.net/xRQs8/2/

可以使用单个按钮完成:+

<table id="dataTable" cellspacing="0" cellpadding="0" border="0" width="100%">
                                        <tr>
                                            <td>
                                                <input type="Button" value="Add More" name="AddMore" class="AddOption" />
                                            </td>
                                        </tr>
                                    </table>