Die JQuery-Tabelle löscht dynamisch eine Datenzeile-Front-End-Fragen und Antworten-php.cn

Die JQuery-Tabelle löscht dynamisch eine Datenzeile

王林

Freigeben： 2023-05-23 11:53:37

Original

760 Leute haben es durchsucht

Bei der Entwicklung von Webanwendungen sind Datentabellen eine häufige Komponente, die normalerweise zur Anzeige von Daten verwendet wird. Manchmal müssen wir jedoch eine bestimmte Datenzeile aus der Tabelle löschen, und es ist sehr praktisch, jQuery zu verwenden, um diese Funktion zu erreichen.

In jQuery verwenden wir normalerweise die Methode remove(), um DOM-Elemente zu entfernen. Wenn wir also eine Datenzeile in der Tabelle löschen, müssen wir zuerst das DOM-Element dieser Zeile abrufen und es dann mit der Methode remove() aus der Tabelle entfernen. remove() 方法来删除 DOM 元素。因此，在删除表格中的一行数据时，我们需要先获取这一行的 DOM 元素，然后使用 remove() 方法将其从表格中移除。

首先，让我们看一下如何获取表格中的一行数据。假设我们有一个表格，其中每一行都有一个删除按钮，当用户点击删除按钮时，我们需要将该行从表格中删除。以下是一个示例表格的 HTML 代码：

<table id="data-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td><button class="delete-row">Delete</button></td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>jane.smith@example.com</td>
      <td><button class="delete-row">Delete</button></td>
    </tr>
    <!-- more rows -->
  </tbody>
</table>

Nach dem Login kopieren

在这个表格中，每一行都包含三个单元格，其中最后一个单元格包含一个名为 "Delete" 的按钮。现在，我们可以使用 jQuery 来为每个删除按钮添加一个点击事件处理程序，以删除其对应的行。以下是实现代码：

$(document).ready(function() {
  // 添加点击事件处理程序
  $('.delete-row').click(function() {
    // 获取要删除的行
    var row = $(this).closest('tr');
    // 从表格中移除行
    row.remove();
  });
});

Nach dem Login kopieren

在上面的代码中，我们首先使用 $() 函数在文档载入完毕后查找所有名为 "delete-row" 的按钮，并为每个按钮添加了一个点击事件处理程序。当用户点击删除按钮时，点击事件将触发，并将执行回调函数。

在回调函数中，我们使用 closest() 方法查找当前按钮所在的行，并将该行存储在 row 变量中。然后，我们使用 remove() 方法将该行从表格中移除。

需要注意的是，尽管我们使用了 closest()

Schauen wir uns zunächst an, wie man eine Datenzeile in die Tabelle einfügt. Angenommen, wir haben eine Tabelle, in der jede Zeile über eine Schaltfläche zum Löschen verfügt. Wenn der Benutzer auf die Schaltfläche zum Löschen klickt, müssen wir diese Zeile aus der Tabelle löschen. Hier ist der HTML-Code für eine Beispieltabelle:

rrreee

In dieser Tabelle enthält jede Zeile drei Zellen, von denen die letzte eine Schaltfläche mit dem Namen „Löschen“ enthält. Jetzt können wir jQuery verwenden, um jeder Löschschaltfläche einen Click-Event-Handler hinzuzufügen, um die entsprechende Zeile zu löschen. Das Folgende ist der Implementierungscode: #🎜🎜#rrreee#🎜🎜#Im obigen Code verwenden wir zunächst die Funktion $(), um alle mit dem Namen „delete-row“ zu finden, nachdem das Dokument geladen wurde .-Schaltflächen hinzugefügt und für jede Schaltfläche einen Click-Event-Handler hinzugefügt. Wenn der Benutzer auf die Schaltfläche „Löschen“ klickt, wird das Klickereignis ausgelöst und die Rückruffunktion ausgeführt. #🎜🎜##🎜🎜#In der Callback-Funktion verwenden wir die Methode closest(), um die Zeile zu finden, in der sich die aktuelle Schaltfläche befindet, und speichern die Zeile in der row variabel. Anschließend verwenden wir die Methode remove(), um die Zeile aus der Tabelle zu entfernen. #🎜🎜##🎜🎜#Es ist zu beachten, dass wir zwar die Methode closest() verwenden, diese jedoch nur das am nächsten kommende Element findet, also wenn die Schaltfläche „Löschen“ nicht direkt in der Zeile enthalten ist Stattdessen müssen Sie den Selektor so ändern, dass er mit dem richtigen Element übereinstimmt. #🎜🎜##🎜🎜#So löschen Sie mit jQuery dynamisch eine Datenzeile in einer Tabelle. Wenn Sie eine Webanwendung entwickeln, kann dieser Ansatz den Benutzern das Bearbeiten und Verwalten von Daten erleichtern. #🎜🎜#

Das obige ist der detaillierte Inhalt vonDie JQuery-Tabelle löscht dynamisch eine Datenzeile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!