使用 jQuery 删除表格行的最佳方法是什么?
使用 jQuery 删除表格行的最佳方法是什么?
IT技术
javascript
jquery
html-table
2021-02-07 20:25:37
6个回答
你说得对:
$('#myTableRow').remove();
如果您的行有一个id
,这可以正常工作,例如:
<tr id="myTableRow"><td>blah</td></tr>
如果您没有id
,则可以使用任何 jQuery过多的选择器。
$('#myTable tr').click(function(){
$(this).remove();
return false;
});
甚至更好的
$("#MyTable").on("click", "#DeleteButton", function() {
$(this).closest("tr").remove();
});
假设您的表格中的数据单元格中有一个按钮/链接,这样的事情就可以解决问题...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});
这将删除单击的按钮/链接的父级的父级。您需要使用 parent() 因为它是一个 jQuery 对象,而不是一个普通的 DOM 对象,并且您需要使用 parent() 两次,因为该按钮位于一个数据单元中,该数据单元位于一行中......这是你想删除什么。$(this) 是被点击的按钮,所以简单地有这样的东西只会删除按钮:
$(this).remove();
虽然这将删除数据单元格:
$(this).parent().remove();
如果您想简单地单击行上的任意位置将其删除,这样的操作就可以了。您可以轻松地修改它以提示用户或仅在双击时工作:
$(".delete").live('click', function(event) {
$(this).parent().remove();
});
希望有帮助......我自己在这方面有点挣扎。
您可以使用:
$($(this).closest("tr"))
用于查找元素的父表行。
它比 parent().parent() 更优雅,这是我开始做的,很快就发现了我的错误。
--Edit -- 有人指出问题是关于删除行...
$($(this).closest("tr")).remove()
如下所述,您可以简单地执行以下操作:
$(this).closest('tr').remove();
类似的代码片段可用于许多操作,例如在多个元素上触发事件。
容易..试试这个
$("table td img.delete").click(function () {
$(this).parent().parent().parent().fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});
其它你可能感兴趣的问题