使用jQuery删除表行

时间:2012-05-19 05:51:07

标签: jquery

以下是我的代码

脚本

$(document).ready(function(){
    $('#click').click(function(){
        $('#table').append('<tr><td>&nbsp;</td></tr>');
    })
    $('#remove').click(function(){
        $('#table').remove('<tr><td>&nbsp;</td></tr>');
    })
})

HTML

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="table">
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>
<div id="click">click</div>
<div id="remove">remove</div>

当我添加一行时效果很好,但我不知道如何删除表格的最后一行。您还可以查看在线demo

我该怎么做?

此外,我想当用户也点击任何一行时它会自行删除。我试过了,但是有一个问题。如果你点击它正在删除它自己的行,但是当你通过点击#click添加一行时,该行不是通过点击它来删除它自己。

这是我的代码:

脚本

$(document).ready(function(){
    $('#click').click(function(){
        $('#table').append('<tr><td>&nbsp;</td></tr>');
    })
    $('#remove').click(function(){
        $('#table tr:last').remove();
    })
    $('#table tr').click(function(){
        $(this).remove();
    });
})

6 个答案:

答案 0 :(得分:23)

如果您要删除#table的最后一个表格行,则需要使用选择器定位它,然后针对它调用$.remove()

$('#remove').on("click", function(){
    $('#table tr:last').remove();
})

答案 1 :(得分:5)

您无法删除,因此您必须指定要删除的节点$('#table tr:first')并将其删除remove()

$('#remove').click(function(){
    $('#table tr:first').remove();
})

http://jsfiddle.net/2mZnR/1/

答案 2 :(得分:1)

演示位于http://jsfiddle.net/BfKSa/ ,以防您绑定,添加和删除每一行,此不同演示 http://jsfiddle.net/xuM4N/进来方便。

API:remove =&gt; http://api.jquery.com/remove/

正如您所说:这将删除“删除表格的最后一行”

$('#table tr:last').remove();将为您的案例提供帮助。

代码

$(document).ready(function(){
    $('#click').click(function(){
        $('#table').append('<tr><td>foo add&nbsp;</td></tr>');
    })
    $('#remove').click(function(){
        $('#table tr:last').remove();
    })
})

答案 3 :(得分:0)

使用选择器查找最后一行并删除该行:

$('#table > tr:last').remove();

这将删除表格中的最后一行。如果你想删除第一个怎么办?

$('#table > tr:first').remove();

就是这样。有jQuery的codechool在线课程。你会发现很多有价值的东西,包括选择器和DOM操作。这是一个链接:http://jqueryair.com/

答案 4 :(得分:0)

您可以使用按钮单击时的表类删除表中的最后一个tr

&#13;
&#13;
$('#remove').on("click", function(){
    $('.tbl tr:last').remove();
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tbl" width="100%" border="1" cellspacing="0" cellpadding="0" >
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>
<button id="remove">remove</button>
&#13;
&#13;
&#13;

答案 5 :(得分:0)

如果要在单击表格行时删除行本身,则

$('table tr').on("click", function(){
    $(this).remove();
});

如果您想在点击表格末尾的点击按钮时添加行

 $('#click').click(function(){
    $('#table').append('<tr><td>Xyz</td></tr>');
})