Fügen Sie die Abfragefunktion in der JQuery-Tabelle hinzu und löschen Sie sie-Front-End-Fragen und Antworten-php.cn

Mit der kontinuierlichen Weiterentwicklung der Internettechnologie nimmt die Bedeutung von Webanwendungen von Tag zu Tag zu. Die Tabelle ist ein wichtiges Informationsanzeigeinstrument und wird häufig in verschiedenen Managementsystemen verwendet. In unserem Programm benötigen wir eine Tabelle zum Anzeigen von Daten sowie ein praktisches Tool zum Hinzufügen, Löschen, Ändern und Überprüfen der Tabelle, was unsere Arbeitseffizienz erheblich verbessern kann. In diesem Artikel wird erläutert, wie Sie mit jQuery die Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen von Tabellen implementieren.

Zuerst benötigen Sie eine HTML-Tabelle. Mit dem folgenden HTML-Code kann eine einfache Tabelle erstellt werden.

<table id="table-data">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
      <td><button class="delete">删除</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
      <td><button class="delete">删除</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>28</td>
      <td><button class="delete">删除</button></td>
    </tr>
  </tbody>
</table>

Nach dem Login kopieren

Als nächstes müssen wir die jQuery-Abhängigkeit hinzufügen.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Nach dem Login kopieren

Dann können wir mit der Implementierung der Funktionen zum Hinzufügen, Löschen, Ändern und Überprüfen beginnen.

Zusätzliche Funktionen

Um dem Formular Funktionen hinzuzufügen, benötigen wir ein Formular, das Benutzern die Eingabe von Daten ermöglicht. Das Formular kann mit dem folgenden HTML-Code erstellt werden.

<form id="form-data">
  <div>
    <label for="name">姓名：</label>
    <input type="text" id="name" required>
  </div>
  <div>
    <label for="age">年龄：</label>
    <input type="number" id="age" required>
  </div>
  <button type="submit">添加</button>
</form>

Nach dem Login kopieren

Als nächstes fügen Sie den folgenden Code in jQuery hinzu.

$("#form-data").submit(function(e) {
  e.preventDefault();
  let name = $("#name").val();
  let age = $("#age").val();
  let newId = $("#table-data tbody tr:last-child td:first-child").text() + 1;
  let row = `<tr>
              <td>${newId}</td>
              <td>${name}</td>
              <td>${age}</td>
              <td><button class="delete">删除</button></td>
            </tr>`;
  $("#table-data tbody").append(row);
  $("#form-data")[0].reset();
});

Nach dem Login kopieren

Zuerst verwenden wir e.preventDefault(), um das standardmäßige Übermittlungsverhalten des Browsers zu verhindern. Anschließend entnehmen wir dem Formular den Namen und das Alter und generieren eine neue Nummer basierend auf der Nummer der letzten Zeile. Anschließend verwenden wir JQuery, um dynamisch eine neue Zeile hinzuzufügen und sie an das Ende der Tabelle anzuhängen. Schließlich rufen wir die Methode reset() auf, um den Wert des Formularfelds auf leer zurückzusetzen. e.preventDefault()禁止浏览器的默认提交行为。然后，我们从表单中获取姓名和年龄，并根据最后一行的编号生成新的编号。然后，我们使用JQuery动态添加一个新的行，并将其附加到表格的末尾。最后，我们调用reset()方法将表单字段的值重置为空。

现在，我们就成功了添加行的功能。

删除功能

下面我们来实现删除行的功能。我们可以在表格的HTML代码中添加一个删除按钮，如下所示：

<td><button class="delete">删除</button></td>

Nach dem Login kopieren

然后，我们可以使用以下jQuery代码来实现删除数据行的功能。

$("tbody").on("click", ".delete", function() {
  if (confirm("确定删除这行数据吗？")) {
    $(this).closest("tr").remove();
  }
});

Nach dem Login kopieren

首先，我们使用.on()事件监听器来监听.delete按钮的点击事件，并使用closest()方法获取其最近的祖先元素，即表格行，并使用remove()方法将其删除。在此之前，我们使用confirm()方法向用户确认是否确实要删除这一行数据，从而避免用户误删数据。

修改功能

下面我们来实现修改行数据的功能。同样地，我们添加一个“编辑”按钮到表格的每行中。

<td><button class="edit">编辑</button></td>

Nach dem Login kopieren

然后，我们需要为编辑按钮添加点击事件监听器，并在其中创建一个表单，将原始数据填入表单中，如下所示。

$("tbody").on("click", ".edit", function() {
  let id = $(this).closest("tr").find("td:first-child").text();
  let name = $(this).closest("tr").find("td:nth-child(2)").text();
  let age = $(this).closest("tr").find("td:nth-child(3)").text();
  let form = `
    <form id="form-edit">
      <div>
        <label for="edit-name">姓名：</label>
        <input type="text" id="edit-name" value="${name}" required>
      </div>
      <div>
        <label for="edit-age">年龄：</label>
        <input type="number" id="edit-age" value="${age}" required>
      </div>
      <button type="submit">保存</button>
    </form>`;
  $(this).closest("tr").html(`
    <td>${id}</td>
    <td>${form}</td>
    <td></td>
    <td></td>
  `);
});

Nach dem Login kopieren

首先，我们使用closest()方法获取当前编辑按钮的祖先元素，即表格行，并使用find()方法通过选择器获取该行的第一个单元格（即ID）、第二个单元格（即姓名）和第三个单元格（即年龄）中的数据，然后将其存储到变量中。

接着，我们创建一个新的表单，并使用变量中的数据填充该表单中的字段。最后，我们使用html()方法将表格行的内容替换为表单的HTML代码。

对于保存操作，我们可以使用以下jQuery代码来实现。

$("tbody").on("submit", "#form-edit", function(e) {
  e.preventDefault();
  let name = $("#edit-name").val();
  let age = $("#edit-age").val();
  let id = $(this).closest("tr").find("td:first-child").text();
  $(this).closest("tr").html(`
    <td>${id}</td>
    <td>${name}</td>
    <td>${age}</td>
    <td>
      <button class="delete">删除</button>
      <button class="edit">编辑</button>
    </td>
  `);
});

Nach dem Login kopieren

首先，我们使用closest()方法获取当前表单的祖先元素，即表格行，并使用find()方法获取该行的ID。然后，我们使用html()方法将表单的数据更新到表格行中，并使用“删除”和“编辑”按钮重新添加到该行中。最后，我们可以使用reset()方法将表单的字段重置为空。

查询功能

最后，我们来实现一个简单的查询功能。我们可以在页面上添加一个文本输入框，并借助jQuery过滤表格数据。我们可以使用以下HTML代码来创建查询栏。

<form id="form-search">
  <input type="text" id="search-keyword" placeholder="请输入姓名搜索" required>
  <button type="submit">查询</button>
</form>

Nach dem Login kopieren

然后，我们可以使用以下jQuery代码来实现查询功能。

$("#form-search").submit(function(e) {
  e.preventDefault();
  let keyword = $("#search-keyword").val();
  $("tbody tr").hide();
  $("tbody tr:contains('" + keyword + "')").show();
});

Nach dem Login kopieren

首先，我们使用.submit()方法为表单添加提交事件监听器，并使用e.preventDefault()禁止默认行为。然后，我们从查询栏中获取关键字，并使用hide()方法将表格的所有行都隐藏起来。最后，我们使用:contains()选择器，根据关键字过滤需要显示的行，并使用show()

Jetzt haben wir die Zeilenfunktion erfolgreich hinzugefügt.

Löschfunktion🎜🎜Jetzt implementieren wir die Funktion zum Löschen von Zeilen. Wir können dem HTML-Code der Tabelle eine Schaltfläche zum Löschen hinzufügen, wie unten gezeigt: 🎜rrreee🎜 Anschließend können wir den folgenden jQuery-Code verwenden, um die Funktion zum Löschen von Datenzeilen zu implementieren. 🎜rrreee🎜Zunächst verwenden wir den Ereignis-Listener .on(), um auf das Klickereignis der Schaltfläche .delete zu warten, und verwenden den Ereignis-Listener

closest()-Methode Ruft das nächstgelegene Vorgängerelement, die Tabellenzeile, ab und entfernt es mit der Methode <code>remove()

. Zuvor verwenden wir die Methode confirm(), um dem Benutzer zu bestätigen, ob er diese Datenzeile wirklich löschen möchte, um zu verhindern, dass der Benutzer die Daten versehentlich löscht. 🎜🎜Änderungsfunktion🎜🎜Jetzt implementieren wir die Funktion zum Ändern von Zeilendaten. Ebenso fügen wir jeder Zeile der Tabelle eine Schaltfläche „Bearbeiten“ hinzu. 🎜rrreee🎜Dann müssen wir einen Klickereignis-Listener für die Schaltfläche „Bearbeiten“ hinzufügen und darin ein Formular erstellen, um das Formular wie unten gezeigt mit den Rohdaten zu füllen. 🎜rrreee🎜Zuerst verwenden wir die Methode closest(), um das Vorgängerelement der aktuellen Bearbeitungsschaltfläche, die Tabellenzeile, abzurufen, und verwenden die Methode find() um den Wert der Zeile über den Selektor zu erhalten. Die Daten in der ersten Zelle (d. h. ID), der zweiten Zelle (d. h. Name) und der dritten Zelle (d. h. Alter) werden dann in Variablen gespeichert. 🎜🎜Als nächstes erstellen wir ein neues Formular und füllen die Felder im Formular mit den Daten in den Variablen. Abschließend verwenden wir die Methode html(), um die Inhalte der Tabellenzeilen durch den HTML-Code des Formulars zu ersetzen. 🎜🎜Für den Speichervorgang können wir den folgenden jQuery-Code verwenden, um dies zu erreichen. 🎜rrreee🎜Zuerst verwenden wir die Methode closest(), um das Vorgängerelement des aktuellen Formulars, die Tabellenzeile, abzurufen, und verwenden dazu die Methode find() Holen Sie sich die ID der Zeile. Anschließend verwenden wir die Methode html(), um die Formulardaten in der Tabellenzeile zu aktualisieren, und verwenden die Schaltflächen „Löschen“ und „Bearbeiten“, um sie erneut zur Zeile hinzuzufügen. Schließlich können wir die Methode reset() verwenden, um die Felder des Formulars auf leer zurückzusetzen. 🎜🎜Abfragefunktion🎜🎜Abschließend implementieren wir eine einfache Abfragefunktion. Wir können der Seite ein Texteingabefeld hinzufügen und die Tabellendaten mithilfe von jQuery filtern. Wir können den folgenden HTML-Code verwenden, um die Abfrageleiste zu erstellen. 🎜rrreee🎜Dann können wir den folgenden jQuery-Code verwenden, um die Abfragefunktion zu implementieren. 🎜rrreee🎜Zunächst verwenden wir die Methode .submit(), um dem Formular einen Submit-Ereignis-Listener hinzuzufügen, und verwenden e.preventDefault(), um das Standardverhalten zu unterdrücken. Dann holen wir uns die Schlüsselwörter aus der Abfragespalte und verwenden die Methode hide(), um alle Zeilen der Tabelle auszublenden. Schließlich verwenden wir den Selektor :contains(), um die Zeilen zu filtern, die basierend auf Schlüsselwörtern angezeigt werden müssen, und verwenden die Methode show(), um diese Zeilen anzuzeigen. 🎜🎜Zu diesem Zeitpunkt haben wir eine grundlegende Funktion zum Hinzufügen, Löschen, Ändern und Abfragen von jQuery-Tabellen implementiert. Mit dieser Methode können Benutzer Tabellendaten einfach hinzufügen, löschen, ändern und abfragen, was die Arbeitseffizienz erheblich verbessert. 🎜

Das obige ist der detaillierte Inhalt vonFügen Sie die Abfragefunktion in der JQuery-Tabelle hinzu und löschen Sie sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!