Ten wpis na blogu zdefiniuje proces filtrowania tabeli w JavaScript.
Jak filtrować tabelę w JavaScript?
Zobaczmy przykład wyjaśniający, jak filtrować tabelę w JavaScript.
Przykład
Najpierw utwórz pasek wyszukiwania w dokumencie HTML z „ wł.klawisz ” właściwość, która wywołuje „ filterTableFunc() ” po zwolnieniu klawisza:
< typ wejścia = 'tekst' ID = 'Szukaj' wł.klawisz = 'filterTableFunc()' symbol zastępczy = 'Szukaj.....' >< br >< br >
Utwórz tabelę, która przechowuje dane pracowników przy użyciu
< identyfikator tabeli = „dane pracownika” granica = „1” >
< tr >
< cz > Nazwa cz >
< cz > E-mail cz >
< cz > Płeć cz >
< cz > Przeznaczenie cz >
< cz > Data dołączenia cz >
tr >
< tr >
< td > Jan td >
< td > Jan @ gmail. z td >
< td > Męski td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Stefan td >
< td > Stefan @ gmail. z td >
< td > Męski td >
< td > HRM td >
< td > dwadzieścia jeden / 10 / 2020 td >
tr >
< tr >
< td > Duża td >
< td > Mari78 @ gmail. z td >
< td > Kobieta td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > ronda12 @ Hotmail. z td >
< td > Męski td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
stół >
Po wykonaniu pliku HTML wynik będzie wyglądał następująco:
Następnie dodajmy funkcjonalność do tabeli filtrów. W pliku skryptu JavaScript lub tagu użyj poniższego kodu, który przefiltruje dane tabeli na podstawie wyszukiwania:
funkcjonować filterTableFunc ( ) {
był filtrWynik = dokument. getElementById ( 'Szukaj' ) . wartość . do małych liter ( ) ;
był pustaTabela = dokument. getElementById ( „dane pracownika” ) ;
był tr = pustaTabela. getElementsByTagName ( 'tr' ) ;
dla ( był i = 1 ; i < tr. długość ; i ++ ) {
tr [ i ] . styl . wyświetlacz = 'Żaden' ;
konst tdTablica = tr [ i ] . getElementsByTagName ( 'td' ) ;
dla ( był j = 0 ; j - 1 ) {
tr [ i ] . styl . wyświetlacz = '' ;
przerwanie ;
}
}
}
}
W powyższym kodzie:
- Najpierw zdefiniuj funkcję „ filterTableFunc() ”.
- Uzyskaj dostęp do paska wyszukiwania, używając jego identyfikatora „ Szukaj ”, aby uzyskać wprowadzoną wartość i zamienić ją na małe litery za pomocą „ na małe litery() ' metoda.
- Uzyskaj odwołanie do tabeli, w której zostanie wykonana operacja filtrowania, używając jej identyfikatora „ Dane pracownika ”.
- Następnie pobierz wiersze tabeli za pomocą „ getElementsByTagName ' metoda.
- Przejrzyj tabelę aż do jej długości, pobierz dane dla każdego wpisu tabeli i sprawdź, czy przechowywana wartość tabeli jest równa szukanej wartości. Jeśli tak, to go wyświetl.
Wyjście
Powyższe dane wyjściowe wskazują, że operacja filtrowania została pomyślnie zastosowana do tabeli.
Wniosek
Tabelę można filtrować w JavaScript, przeglądając dane tabeli i zwracając odpowiednie dane. To filtrowanie odbywa się za pomocą funkcji wywoływanej po określonym zdarzeniu. To podejście będzie działać w taki sposób, że na identycznych wprowadzonych danych zostaną pobrane odpowiednie dane z tabeli, niezależnie od rozróżniania wielkości liter w polu tekstowym wprowadzania. W tym poście opisano podejście, którego można użyć do filtrowania tabeli w JavaScript.