Question

我有一张表列出了一堆客户。最后一个单元格是ajax删除按钮。

我希望通过jQuery删除包含已删除客户的行。

<table>
<tr><td>Customer info 1</td><td><a href="javascript:deleteCustomer(1);">Delete</a></td>
<tr><td>Customer info 2</td><td><a href="javascript:deleteCustomer(2);">Delete</a></td>

function deleteCustomer(customerId)
{
$.post("somepage.php", {cid:customerId}, function(data){
//...delete the row that called the function...
}

Answer 1

删除非常相对......

你真正想要的只是用户不再看到它。如果选择整行，可以在其上调用toggle（），使其对用户隐藏。在下一页上加载它不会在那里（假设你的ajax请求被删除就好了），所以只要它被隐藏，它就像删除一样好......

回到行的很多方法。你可以给它一个唯一的customerRow ID + id ..所以你有行..

<tr id="customerRow1"> ... </tr>
<tr id="customerRow2"> ... </tr>

然后只需在id为customerRow + customerId

的元素上调用切换

$("#customerRow" + customerId).toggle()

您也可以将其添加为参数：

<table>
<tr><td>Customer info 1</td><td><a href="javascript:deleteCustomer(1,this);">Delete</a></td>
<tr><td>Customer info 2</td><td><a href="javascript:deleteCustomer(2,this);">Delete</a></td>

你的职能将成为：

function deleteCustomer(customerId,element) {
    $.post("somepage.php", {cid:customerId}, function(data){
        $(element).closest("tr").toggle()
    });
}

Answer 2

您可以将此添加为参数：

<table>
<tr><td>Customer info 1</td><td><a href="javascript:deleteCustomer(1,this);">Delete</a></td>
<tr><td>Customer info 2</td><td><a href="javascript:deleteCustomer(2,this);">Delete</a></td>

你的职能将成为：

function deleteCustomer(customerId,element) {
    $.post("somepage.php", {cid:customerId}, function(data){
        $(element).closest("tr").remove();
    });
}

另一种方法是为每一行分配一个id：

<table>
<tr id='row_1'><td>Customer info 1</td><td><a href="javascript:deleteCustomer(1);">Delete</a></td>
<tr id='row_2'><td>Customer info 2</td><td><a href="javascript:deleteCustomer(2);">Delete</a></td>

然后你删除这样的行：

$("tr[id=row_" + customerId + "]").remove();

Answer 3

我写了一篇关于同一主题的文章，你可以在这里查看：

<强> Deleting Table Rows Using JQuery and PHP

使用jQuery <table> </table>删除a中的当前行

3 个答案: