jquery setzt tr dynamisch auf Ein- und Ausblenden

Da auf Webseiten eine große Menge an Daten und Informationen angezeigt wird, können Bildlaufleisten und Paginierung unsere Anforderungen nicht mehr erfüllen. Daher brauchen wir einige bessere Möglichkeiten, Daten anzuzeigen und auszublenden. In diesem Artikel wird erläutert, wie Sie mit jQuery die Anzeige und Ausblendung von tr dynamisch festlegen und Daten in der Tabelle direkt anzeigen oder ausblenden.

1. Räumen Sie den Tisch ab

Beim dynamischen Eindecken des Tisches ist es am besten, zuerst den Tisch abzuräumen. Verwenden Sie den folgenden Code, um die Tabelle zu löschen:

$("#myTable tbody tr").remove();

Unter diesen ist #myTable die Tabellen-ID, die Sie bedienen möchten, tbody stellt den Hauptteil der Tabelle dar und tr ist die Tabellenzeile.

2. Alle Zeilen anzeigen

Um alle Zeilen in der Tabelle anzuzeigen, können Sie den folgenden Code verwenden:

$("#myTable tbody tr").show();

Auf diese Weise werden alle Zeilen der Tabelle angezeigt.

3. Alle Zeilen ausblenden

Um alle Zeilen in einer Tabelle auszublenden, können Sie den folgenden Code verwenden:

$("#myTable tbody tr").hide();

Dadurch werden alle Tabellenzeilen ausgeblendet.

4. Zeilen nach Bedingungen anzeigen

Verwenden Sie den folgenden Code, um Zeilen nach Bedingungen anzuzeigen:

$("#myTable tbody tr").filter(function () {
    return $(this).text().indexOf("条件") !== -1;
}).show();

Darunter können die Bedingungen entsprechend Ihren Anforderungen geändert werden. Diese Methode kann Zeilen basierend auf bestimmten Kriterien anzeigen, z. B. Textinhalt, Klasse oder anderen Attributen.

5. Zeilen basierend auf Bedingungen ausblenden

Verwenden Sie den folgenden Code, um Zeilen basierend auf Bedingungen auszublenden:

$("#myTable tbody tr").filter(function () {
    return $(this).text().indexOf("条件") !== -1;
}).hide();

Dadurch werden Zeilen basierend auf angegebenen Bedingungen ausgeblendet.

6. Zeilen durchsuchen

Verwenden Sie den folgenden jQuery-Code, um Tabellenzeilen zu durchsuchen:

$("#myTable tbody tr").each(function () {
    var rowText = $(this).text().toLowerCase();
    $('input[type="text"]').keyup(function () {
        if ($(this).val().toLowerCase() === "" || rowText.indexOf($(this).val().toLowerCase()) !== -1) {
            $(this).closest("tr").show();
        } else {
            $(this).closest("tr").hide();
        }
    });
});

Dieser Code durchläuft zunächst alle Tabellenzeilen und sucht nach der Eingabe von Text in das Eingabefeld. Wenn das Textfeld keinen Inhalt hat, werden alle Zeilen angezeigt. Wenn eine Übereinstimmung gefunden wird, werden nur die passenden Zeilen angezeigt. Andernfalls werden alle verbleibenden Zeilen ausgeblendet.

7. Zusammenfassung

Mit jQuery ist es sehr einfach, die Anzeige und das Ausblenden von Tabellenzeilen dynamisch festzulegen. In diesem Artikel wird erklärt, wie Sie eine Tabelle löschen, alle Zeilen ein- oder ausblenden, Zeilen bedingt ein- oder ausblenden und wie Sie Tabellenzeilen durchsuchen. Mit diesen Techniken können Sie Daten besser anzeigen und die Benutzererfahrung verbessern.

Das obige ist der detaillierte Inhalt vonjquery setzt tr dynamisch auf Ein- und Ausblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!