用jQuery删除表行最好的方法是什么?
当前回答
如果要删除的行可能发生变化,可以使用此方法。只需将您希望删除的行#传递给该函数。
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}
其他回答
$('tr').click(function()
{
$(this).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();
});
如果你有这样的HTML
<tr>
<td><span class="spanUser" userid="123"></span></td>
<td><span class="spanUser" userid="123"></span></td>
</tr>
其中userid="123"是一个自定义属性,可以在构建表时动态填充,
你可以用
$(".spanUser").live("click", function () {
var span = $(this);
var userid = $(this).attr('userid');
var currentURL = window.location.protocol + '//' + window.location.host;
var url = currentURL + "/Account/DeleteUser/" + userid;
$.post(url, function (data) {
if (data) {
var tdTAG = span.parent(); // GET PARENT OF SPAN TAG
var trTAG = tdTAG.parent(); // GET PARENT OF TD TAG
trTAG.remove(); // DELETE TR TAG == DELETE AN ENTIRE TABLE ROW
} else {
alert('Sorry, there is some error.');
}
});
});
在这种情况下,你不知道TR标签的类或id,但无论如何你可以删除它。
以下是可以接受的:
$('#myTableRow').remove();
试试这个尺寸
$(this).parents('tr').first().remove();
完整的清单:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.deleteRowButton').click(DeleteRow);
});
function DeleteRow()
{
$(this).parents('tr').first().remove();
}
</script>
</head>
<body>
<table>
<tr><td>foo</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
<tr><td>bar bar</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
<tr><td>bazmati</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
</table>
</body>
</html>
看看它的实际应用
推荐文章
- 如何阻止恶意代码欺骗“Origin”报头来利用CORS?
- Angular JS:当我们已经有了具有作用域的指令控制器时,指令的link函数还需要什么?
- 我如何在JavaScript中转换对象数组为一个对象?
- 如何让一个按钮将我的页面重定向到另一个页面?
- 如何让元素被点击(对于整个文档)?
- 我如何检查如果一个变量是JavaScript字符串?
- 如何检测如果多个键被按下一次使用JavaScript?
- 如何通过history. pushstate获得历史变化的通知?
- 使用jQuery改变输入字段的类型
- 在JavaScript中,什么相当于Java的Thread.sleep() ?
- 我如何才能在表中应用边界?
- 使用jQuery以像素为整数填充或边距值
- 检查是否选择了jQuery选项,如果没有选择默认值
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前,每次测试