Wie füge ich Tabellenzeilen in jQuery hinzu, bearbeite und lösche sie?

Im heutigen Zeitalter der Webentwicklung ist eine effektive und effiziente Tabellenverwaltung sehr wichtig geworden, insbesondere beim Umgang mit datenintensiven Webanwendungen. Die Möglichkeit, Zeilen dynamisch einer Tabelle hinzuzufügen, zu bearbeiten und zu löschen, kann das Benutzererlebnis erheblich verbessern und Anwendungen interaktiver machen. Eine effektive Möglichkeit, dies zu erreichen, besteht darin, die Leistungsfähigkeit von jQuery zu nutzen. jQuery bietet viele Funktionen, die Entwicklern bei der Durchführung von Vorgängen helfen.

Tabellenzeilen

Tabellenzeilen sind Sammlungen miteinander verbundener Daten, die durch das

-Element in HTML dargestellt werden. Es wird verwendet, um Zellen (dargestellt durch Elemente) in einer Tabelle zu gruppieren. Jedes -Element wird zum Definieren einer Zeile in der Tabelle verwendet und enthält bei Tabellen mit mehreren Attributen normalerweise ein oder mehrere -Elemente.

Grammatik

$(selector).append(content)

Die append()-Methode in jQuery wird verwendet, um Inhalt am Ende eines Elements hinzuzufügen, unabhängig davon, ob es sich um ein einzelnes Element oder eine Gruppe von Elementen handelt. Inhalte können Text, HTML oder andere Elemente sein.

Der Inhalt kann HTML-Strings, DOM-Elemente oder jQuery-Objekte sein.

$(selector).find(selectCondition)

Die Funktion find() in jQuery wird zum Suchen und Auswählen von Nachkommenelementen des ausgewählten Elements verwendet. Es durchsucht den gesamten DOM-Baum nach dem ausgewählten Element und gibt alle passenden Elemente in einem neuen jQuery-Objekt zurück.

Wobei selectCondition eine Zeichenfolge ist, die das auszuwählende Element darstellt, z. B. einen Klassen- oder Tagnamen.

$(selctor).remove()

Die Methode „remove()“ in jQuery wird verwendet, um das ausgewählte Element und seine untergeordneten Elemente aus dem DOM (Document Object Model) zu entfernen.

Methode

Um Operationen an Tabellenzeilen mit jQuery durchzuführen, verwenden wir eine Kombination aus jQuery-Methoden und DOM-Manipulationstechniken. Lassen Sie uns alle drei Vorgänge besprechen, die wir in diesem Artikel sehen werden, nämlich das separate Hinzufügen, Bearbeiten und Löschen von Zeilen. Wenn wir also über die erste Operation sprechen, d. h. das Hinzufügen einer neuen Zeile zur Tabelle, verwenden wir die oben erwähnte append()-Methode. Dazu erstellen wir zunächst ein neues

-Element und fügen es dann mit der Methode append() in die Tabelle ein.

Wir füllen dann die neue Zeile mit dem neuen

-Element und weisen ihm mithilfe der Methode text() oder html() einen Wert zu. Für den zweiten Vorgang, der darin besteht, die Tabellenzeile zu ändern, verwenden wir zunächst die Methode find(), um die relevanten Elemente in der Zeile auszuwählen, und verwenden dann die Methode text() oder html(), um ihren Inhalt zu ändern. Um schließlich die letzte Operation auszuführen, nämlich das Löschen der Tabellenzeile, verwenden wir einfach die Methode „remove()“ für die Zeile, die wir löschen möchten.

Aber bevor wir anfangen, alle Teile zu erklären, möchte ich Sie zunächst darauf aufmerksam machen, dass ich zum Einbinden von jQuery in meine Webseiten ein CDN verwende, was Sie im Skript-Tag sehen können.

Nun zurück zum Code. Lassen Sie uns zunächst das Körperelement besprechen. Der Körper enthält eine virtuelle Tabelle mit zwei Zeilen und zwei Spalten. Darüber hinaus enthält es drei Schaltflächen mit den Bezeichnungen „Zeile hinzufügen“, „Zeile löschen“ und „Zeile bearbeiten“, die wir später im Skript verwenden werden, um dem Code die erforderliche Funktionalität hinzuzufügen. Ich habe auch CSS verwendet, um einige Stile hinzuzufügen, um das Erscheinungsbild der Tabellenzeilen zu verbessern. Schließlich habe ich im Skriptteil die Logik für alle Funktionen mit jQuery geschrieben. Ich habe alle oben genannten Funktionen genutzt, um diese Funktionalität zu erreichen. Diese Funktionalität wurde mithilfe von jQuery-Ereignishandlern implementiert, die ausgelöst werden, wenn auf die entsprechende Schaltfläche geklickt wird.

Beispiel

Hier ist der vollständige Code, den wir in diesem Beispiel verwenden werden -

<!DOCTYPE html>
<html>
<head>
   <title>How to Add Edit and Delete Table Row in jQuery?</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <style>
      table{
         border: 2px solid black
      }
      td{
         padding: 2px
      }
   </style>
</head>
<body>
   <h4>How to Add Edit and Delete Table Row in jQuery? </h4>
   <table id="my-table">
      <tr>
         <td>Original Row</td>
         <td>Data</td>
      </tr>
      <tr>
         <td>Original Row</td>
         <td>Data</td>
      </tr>
   </table>
   <br>
   <button id="add-btn">Add Row</button>
   <button id="remove-btn">Remove Row</button>
   <button id="edit-btn">Edit Row</button>
   <script>
      $(document).ready(function(){
         $("#add-btn").click(function(){
            var newRow = "<tr><td>New Row</td><td>Data</td></tr>";
            $("#my-table").append(newRow);
         });
         $("#remove-btn").click(function(){
            $("#my-table tr:last").remove();
         });
         $("#edit-btn").click(function(){
            let rows=$("#my-table").find("tr")
            let idx=Math.floor(Math.random()*rows.length)
            rows.eq(idx).find("td").eq(0).text("Edited Row")
         });
      });
   </script>
</body>
</html>

Fazit

In diesem Artikel haben wir viele Methoden in jQuery vorgestellt, nämlich append(), find() und remove(). Wir haben gesehen, wie man diese von jQuery bereitgestellten Methoden zusammen mit einigen DOM-Manipulationstechniken verwendet, um Tabellenzeilen dynamisch hinzuzufügen, zu bearbeiten und zu löschen.

Das obige ist der detaillierte Inhalt vonWie füge ich Tabellenzeilen in jQuery hinzu, bearbeite und lösche sie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!