So ändern Sie die Tabelle mit jquery

In den letzten Jahren hat sich jQuery mit der rasanten Entwicklung der Webtechnologie zu einer der beliebtesten JavaScript-Bibliotheken in der Front-End-Entwicklung entwickelt. Es kann uns helfen, HTML-Dokumente einfacher zu verwalten, DOM-Elemente zu bedienen, Ereignisse zu verarbeiten usw.

Im Webentwicklungsprozess sind Tabellen eine wichtige Möglichkeit, Daten anzuzeigen. Manchmal müssen wir das Formular jedoch ändern und bearbeiten. jQuery stellt uns leistungsstarke Funktionen zur Verfügung, mit denen wir Tabellen einfach ändern können. Als nächstes erklären wir, wie man die Tabelle mit jquery ändert.

1. Tabellenzeilen dynamisch hinzufügen

Normalerweise gibt es auf unserer Seite einige Tabellenzeilen, die in Echtzeit hinzugefügt oder gelöscht werden müssen. Beispielsweise können Benutzer in einer Warenkorbliste auf einer Shopping-Website Artikel zum Warenkorb hinzufügen oder daraus löschen. Zu diesem Zeitpunkt wäre es sehr zeitaufwändig und umständlich, Tabellenzeilen jedes Mal manuell hinzuzufügen und zu löschen. jQuery stellt uns Methoden wie „append()“, „prepend()“, „after()“ und „before()“ zur Verfügung, mit denen sich Tabellenzeilen problemlos dynamisch hinzufügen und löschen lassen.

Wenn wir beispielsweise der Tabelle eine Zeile hinzufügen möchten, können wir den folgenden Code verwenden:

$("table").append("<tr><td>新行数据 1</td><td>新行数据 2</td></tr>");

Nach der Ausführung des obigen Codes wird eine Zeile hinzugefügt Die letzte Zeile der Tabelle lautet „Neue Zeilendaten 1“ und „Neue Zeilendaten 2“.

2. Dynamischer Betrieb von Tabellendaten

Manchmal müssen wir die Daten einer vorhandenen Tabelle ändern, beispielsweise müssen die Daten in einer Spalte der Tabelle aktualisiert werden . jQuery bietet die Methoden „text()“ und „html()“, um Tabellendaten einfach zu ändern.

Wenn wir beispielsweise die Daten in der zweiten Spalte der Tabelle ändern möchten, können wir den folgenden Code verwenden:

$("table tr td:nth-child(2)").text("新的数据");

Der obige Code aktualisiert alle Daten in der zweiten Spalte der Tabelle auf „Neue Daten“.

3. Tabellensortierfunktion implementieren

Wenn eine Tabelle mit vielen Daten vorhanden ist, wird normalerweise eine Tabellensortierfunktion bereitgestellt, damit Benutzer Daten einfach anzeigen und vergleichen können . Hier können wir die Methode „sortierbar“ in der jQuery-UI-Bibliothek verwenden, um die Tabellensortierfunktion sehr einfach zu implementieren.

Zum Beispiel haben wir die folgende Tabelle:

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>25</td>
            <td>女</td>
        </tr>
        <tr>
            <td>小刚</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小芳</td>
            <td>22</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

Wir können die Tabelle über den folgenden Code sortieren:

$(function(){
    $("table tbody").sortable({
        placeholder : "ui-state-highlight"
    });
});

Daunter „sortierbar“. () „Die Funktion fügt der Tabelle eine ziehbare Funktion hinzu und sortiert die gezogenen Zeilen automatisch, wobei „Platzhalter“ ein Platzhalter ist. Wenn eine Zeile gezogen wird, wird die belegte Position vorübergehend von diesem Platzhalter besetzt.

Nachdem der obige Code ausgeführt wurde, können die Zeilen in der Tabelle nach Belieben gezogen werden, wodurch die Sortierfunktion der Tabelle realisiert wird.

4. Echtzeitsuche von Tabellendaten

In einigen Tabellen mit großen Datenmengen können wir eine Suchfunktion bereitstellen, damit Benutzer die benötigten Daten schnell finden können zu finden. Hier können wir die „Filter“-Methode von jQuery verwenden, um eine Echtzeitsuche nach Tabellendaten zu erreichen.

Zum Beispiel haben wir die folgende Tabelle:

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>25</td>
            <td>女</td>
        </tr>
        <tr>
            <td>小刚</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小芳</td>
            <td>22</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

Wir können den folgenden Code verwenden, um die Echtzeitsuche von Tabellendaten zu implementieren:

$(function(){
    $("#search_input").keyup(function(){
        var keyword = $(this).val();
        $("table tbody tr").hide().filter(":contains('"+ keyword +"')").show();
    });
});

#🎜🎜 #Im obigen Code überwacht die Methode „keyup()“ Änderungen im Eingabefeld des Suchfelds und wird ausgelöst, wenn die Tastatur gedrückt wird. Geben Sie als Nächstes die Schlüsselwörter in das Eingabefeld ein, filtern Sie die übereinstimmenden Zeilen mit „filter()“ und zeigen Sie schließlich die Suchergebnisse mit „show()“ an.

Durch die oben genannten Methoden können wir die Tabelle einfach ändern, sortieren, suchen und andere Vorgänge ausführen, um die Benutzererfahrung der Seite zu verbessern.

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Tabelle mit jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!