卡卡網(wǎng)

jQuery刪除表行(table tr)：本文介紹如何刪除選定的表行(table tr)。如何用jQuery按鈕單擊事件，按id或class-name刪除表行。 在按鈕單擊時(shí)，我們刪除選定的行/ tr可能是其動(dòng)態(tài)添加的表行或已在DOM上使用的。 使用jQuery .on()將能夠通過指定其類名或Id來選擇動(dòng)態(tài)添加的元素，然后使用.remove()方法刪除所選的表行。

輸出

用jQuery remove()方法刪除表格行(table tr)

HTML：添加包含一些數(shù)據(jù)的HTML表（刪除表格行）

首先，我們?cè)贖TML頁面中添加了一個(gè)表標(biāo)記，其中包含一些“tr”表行和“td”表數(shù)據(jù)以及一個(gè)名為Delete的按鈕。 這里刪除按鈕用于刪除特定的表行。我們的HTML結(jié)構(gòu)如下面的代碼所示。

<table id="tbUser">
  <tr>
    <th>Sr</th><th>Name</th><th>Location</th><th></th>
  </tr>
  <tr>
    <td>1</td><td>Amit</td><td>Ghatkopar</td>
    <td><button class="btnDelete">Delete</button></td>
  </tr>
  <tr>
    <td>2</td><td>Vicky</td><td>Powai</td>
    <td><button class="btnDelete">Delete</button></td>
  </tr>
  <tr>
    <td>3</td><td>Sunny</td><td>Powai</td>
    <td><button class="btnDelete">Delete</button></td>
  </tr>
  <tr>
    <td>4</td><td>John</td><td>NewYork</td>
    <td><button class="btnDelete">Delete</button></td>
  </tr>
</table>

在上表中，我們添加了一些數(shù)據(jù)，在每一行中，我們有一個(gè)公共類為“btnDelete”的按鈕。 現(xiàn)在將在按鈕單擊時(shí)添加單擊事件，單擊它將從HTML表中刪除該行tr。

jQuery：在按鈕單擊時(shí)刪除表行(tr)的代碼

在這里，首先我們?cè)诎粹o標(biāo)簽上創(chuàng)建一個(gè)jQuery單擊事件，然后使用nearest()方法選擇tr，之后用remove()方法刪除該tr，類似于使用.next()方法和.remove()刪除下一個(gè)表行tr。 這是我們能夠刪除表格行的方式，我們的最終代碼如下所示。

$("#tbUser").on('click', '.btnDelete', function () {
  $(this).closest('tr').remove();
});

execcodegetcode

以上便是用jQuery remove()方法刪除表格行(table tr)的寫法。如果您想要讀取或訪問表格單元格TD值，請(qǐng)查看完整教程 - 如何在jQuery中讀取表格單元格[TD數(shù)據(jù)]。

標(biāo)簽: JQuery  table