刪除當前行 <table> 與jQuery

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請求已將其刪除），因此，只要隱藏它，它就和刪除一樣好...

有很多方法可以返回該行。 您可以為其指定一個唯一的ID，即customerRow +該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

我已經寫了一篇關於同一主題的文章，您可以在這里查看：

使用JQuery和PHP刪除表行