So aktualisieren Sie Tabellen schnell mit JQuery

In der Frontend-Entwicklung ist die Anzeige von Tabellen sehr verbreitet. Wenn jedoch die Daten in der Tabelle aktualisiert werden müssen und herkömmliche Methoden verwendet werden, z. B. das direkte Ändern von DOM-Elementen, wird die Lesbarkeit und Wartbarkeit des Codes sehr schlecht. Zu diesem Zeitpunkt bietet uns das Aufkommen der jQuery-Bibliothek eine Lösung für die schnelle Aktualisierung von Tabellen.

jQuery ist eine sehr beliebte JavaScript-Bibliothek. Ihr Hauptmerkmal ist, dass sie eine einfache und schnelle API bereitstellt, die uns helfen kann, das DOM elegant zu betreiben und interaktive Seiten schnell zu erstellen. Unter anderem bietet jQuery viele praktische Methoden, mit denen wir die Daten in der Tabelle schnell aktualisieren können. Lassen Sie uns die spezifische Implementierung Schritt für Schritt erklären.

1. Holen Sie sich das Tabellenobjekt

Bevor wir mit der Aktualisierung der Tabelle beginnen, müssen wir zuerst das Tabellenobjekt abrufen. Tabellenelemente können mit den Selektoren von jQuery ausgewählt werden. Wenn wir beispielsweise eine Tabelle mit einem Bezeichner der Klasse „table-data“ haben, lautet der Code wie folgt:

let table = $(".table-data");

Über dieses Tabellenobjekt können wir die Tabelle bearbeiten.

2. Verwenden Sie .text(), um den Zellinhalt zu aktualisieren.

Wenn wir nur den Textinhalt in der Zelle aktualisieren müssen, können wir ihn mit der Methode .text() vervollständigen. Rufen Sie das Zellelement, das Sie ändern möchten, über den Selektor ab und verwenden Sie dann die Methode text(), um den zu aktualisierenden Textinhalt über Parameter zu übergeben. Ändern Sie beispielsweise den Text in der Zelle in Zeile 2 und Spalte 3 in „geänderter Text“:

let td = table.find("tr:eq(1) td:eq(2)");
td.text("修改后的文本");

Es ist zu beachten, dass hier der Selektor :eq verwendet wird, was bedeutet, dass das Element ausgewählt wird, das einer bestimmten Seriennummer entspricht. von 0 an zählen. Daher bedeutet tr:eq(1) die Auswahl des Elements in Zeile 2 der Tabelle, während td:eq(2) die Auswahl des Zellenelements in Spalte 3 bedeutet.

3. Verwenden Sie .attr(), um Zellattribute zu aktualisieren

Zusätzlich zum Aktualisieren des Textinhalts in der Zelle müssen wir manchmal auch die Attribute in der Zelle aktualisieren. Beispielsweise müssen wir möglicherweise die data-*-Attribute in der Zelle aktualisieren oder das Klassenattribut der Zelle ändern usw. Zu diesem Zeitpunkt kann dies mit der Methode .attr() erfolgen. Ändern Sie beispielsweise das Daten-ID-Attribut in der Zelle in Zeile 2 und Spalte 3 in 123:

let td = table.find("tr:eq(1) td:eq(2)");
td.attr("data-id", "123");

Es ist zu beachten, dass der Wert über ein Objekt übergeben werden kann, wenn mehrere Attribute aktualisiert werden müssen. Ändern Sie beispielsweise das Klassenattribut und das Daten-ID-Attribut der Zelle in Zeile 2, Spalte 3. Der Code lautet wie folgt:

let td = table.find("tr:eq(1) td:eq(2)");
td.attr({
  "class": "new-class",
  "data-id": "123"
});

4 Verwenden Sie .html(), um den Zellinhalt zu aktualisieren

Manchmal beim Aktualisieren Zellinhalt, wenn der zu aktualisierende Inhalt HTML-Tags enthält, können Sie die Methode .html() verwenden. Ähnlich wie bei der Verwendung der .text()-Methode können Sie den jQuery-Selektor verwenden, um die Zellen auszuwählen, die aktualisiert werden müssen, und dann den zu aktualisierenden HTML-Code über Parameter übergeben. Ändern Sie beispielsweise den Inhalt der Zelle in Zeile 2 und Spalte 3 wie folgt:

let td = table.find("tr:eq(1) td:eq(2)");
td.html("<a href='#'>链接文本</a>");

5. Verwenden Sie .replaceWith() und .replaceWith(), um den gesamten Zeileninhalt zu aktualisieren

Manchmal müssen wir die gesamte Zeile aktualisieren Wenn sich die Zelle befindet, erscheint die Verwendung der oben genannten Methode etwas umständlich. An dieser Stelle können Sie die Methode .replaceWith() verwenden, um die gesamte HTML-Codezeile direkt zu ersetzen. Ersetzen Sie beispielsweise den gesamten Inhalt von Zeile 2 durch:

let tr = table.find("tr:eq(1)");
tr.replaceWith("<tr><td>新的单元格内容1</td><td>新的单元格内容2</td><td>新的单元格内容3</td></tr>");

Wenn Sie außerdem nur die gesamte Zeile ändern müssen, in der sich eine bestimmte Zelle befindet, können Sie zuerst den HTML-Code der gesamten Zeile abrufen und dann ersetzen Zeile, in der sich die Zelle befindet.

let td = table.find("tr:eq(1) td:eq(2)");
let tr = td.parents("tr");
tr.replaceWith("<tr><td>新的单元格内容1</td><td>新的单元格内容2</td><td>新的单元格内容3</td></tr>");

6. Verwenden Sie .empty() und .append(), um den Tabelleninhalt zu aktualisieren.

Zusätzlich zur Verwendung der oben genannten Methoden zum Aktualisieren von Zellen einzeln oder der gesamten Zeile besteht eine weitere Methode darin, .empty() und von jQuery zu verwenden .append() Methode zum Löschen des ursprünglichen Inhalts der Tabelle und zum Hinzufügen neuen HTML-Codes. Um beispielsweise den gesamten Tabelleninhalt durch neuen HTML-Code zu ersetzen, können Sie die folgende Methode verwenden:

let newHtml = "<table><tr><td>新的单元格内容1</td><td>新的单元格内容2</td><td>新的单元格内容3</td></tr></table>";
table.empty().append(newHtml);

Die oben genannten Methoden sind einige Methoden zur schnellen Aktualisierung der Tabelle mit jQuery. Mit dieser Methode kann die Tabelle bequem und schnell aktualisiert werden Außerdem kann die Wartbarkeit des Codes verbessert werden. Außerdem können wir die Daten in der Tabelle schnell ändern und aktualisieren.

Das obige ist der detaillierte Inhalt vonSo aktualisieren Sie Tabellen schnell mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!