In diesem Blogbeitrag wird der Prozess zum Filtern der Tabelle in JavaScript definiert.
Wie filtert man Tabellen in JavaScript?
Sehen wir uns ein Beispiel an, das erklärt, wie eine Tabelle in JavaScript gefiltert wird.
Beispiel
Erstellen Sie zunächst eine Suchleiste in einem HTML-Dokument mit dem „ onkeyup ” Eigenschaft, die die “ filterTableFunc() “ beim Loslassen der Taste:
< Eingabetyp = 'Text' Ich würde = 'Suche' onkeyup = 'filterTableFunc()' Platzhalter = 'Suche.....' >< Br >< Br >
Erstellen Sie mithilfe von eine Tabelle, in der Mitarbeiterdaten gespeichert werden
< Tabellen-ID = 'Mitarbeiterdaten' Grenze = '1' >
< tr >
< th > Name th >
< th > Email th >
< th > Geschlecht th >
< th > Bezeichnung th >
< th > Beitrittsdatum th >
tr >
< tr >
< td > John td >
< td > John @ gmail. mit td >
< td > Männlich td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Stefan td >
< td > Stefan @ gmail. mit td >
< td > Männlich td >
< td > HRM td >
< td > einundzwanzig / 10 / 2020 td >
tr >
< tr >
< td > Groß td >
< td > mari78 @ gmail. mit td >
< td > Weiblich td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > rhonda12 @ heisse Mail. mit td >
< td > Männlich td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
Tisch >
Nach dem Ausführen der HTML-Datei sieht die Ausgabe so aus:
Danach fügen wir der Filtertabelle Funktionen hinzu. Verwenden Sie in einer JavaScript-Skriptdatei oder einem Tag den folgenden Code, der die Daten der Tabelle basierend auf der Suche filtert:
Funktion filterTableFunc ( ) {
war filterErgebnis = dokumentieren. getElementById ( 'Suche' ) . Wert . zu Kleinbuchstaben ( ) ;
war leereTabelle = dokumentieren. getElementById ( 'Mitarbeiterdaten' ) ;
war tr = leereTabelle. getElementsByTagName ( 'tr' ) ;
zum ( war ich = 1 ; ich < tr. Länge ; ich ++ ) {
tr [ ich ] . Stil . Anzeige = 'keiner' ;
konst tdArray = tr [ ich ] . getElementsByTagName ( 'td' ) ;
zum ( war j = 0 ; j - 1 ) {
tr [ ich ] . Stil . Anzeige = '' ;
Unterbrechung ;
}
}
}
}
Im oben angegebenen Code:
- Definieren Sie zuerst eine Funktion „ filterTableFunc() “.
- Greifen Sie über die ID auf die Suchleiste zu „ Suche “, um den eingegebenen Wert zu erhalten und ihn mit „ nach Kleinbuchstaben () ' Methode.
- Holen Sie sich einen Verweis auf die Tabelle, in der die Filteroperation mit ihrer ID ausgeführt wird. Mitarbeiterdaten “.
- Rufen Sie dann die Tabellenzeilen mit dem „ getElementsByTagName ' Methode.
- Durchlaufen Sie die Tabelle bis zu ihrer Länge, rufen Sie die Daten für jeden Tabelleneintrag ab und prüfen Sie, ob der gespeicherte Wert der Tabelle gleich dem gesuchten Wert ist. Wenn ja, dann zeigen Sie es an.
Ausgabe
Die obige Ausgabe zeigt an, dass der Filtervorgang erfolgreich auf die Tabelle angewendet wurde.
Fazit
Eine Tabelle kann in JavaScript gefiltert werden, indem die Tabellendaten durchlaufen und die relevanten Daten zurückgegeben werden. Diese Filterung erfolgt durch eine Funktion, die bei einem bestimmten Ereignis aufgerufen wird. Dieser Ansatz funktioniert so, dass bei identischen Eingaben die entsprechenden Daten aus der Tabelle abgerufen werden, unabhängig von der Groß-/Kleinschreibung im Eingabetextfeld. Dieser Beitrag beschreibt einen Ansatz, mit dem eine Tabelle in JavaScript gefiltert werden kann.