Jak filtrować tabelę w JavaScript

Podczas tworzenia dużej tabeli HTML na stronie, ważne jest, aby uwzględnić funkcję filtra dla lepszego wrażenia użytkownika. Aby to zrobić, użyj JavaScript, aby filtrować rekordy w tabeli, przeszukując dowolny rekord tabeli w polu wyszukiwania. Ponadto kod JavaScript zapewnia mniej wierszy kodu do wydajnego działania.

Ten post 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 za pomocą „Onkeyup„Nieruchomość, która nazywa„ ”FilterTableFunc ()„Kiedy klucz zostanie wydany:

Utwórz tabelę, która przechowuje dane pracowników za pomocą

tag i przypisz identyfikator „pracownik”:

Nazwa	E-mail	Płeć	Przeznaczenie	Data dołączenia
Jan	[email protected]	Mężczyzna	CPA	5/5/2020
Stephen	[email protected]	Mężczyzna	HRM	21/10/2020
Mari	[email protected]	Kobieta	HRM	16/05/2022
Rhonda	[email protected]	Mężczyzna	CFA	23.06.2022

Po wykonaniu pliku HTML wyjście będzie wyglądało tak:

Następnie dodajmy funkcjonalność do tabeli filtra. W pliku skryptu JavaScript lub znaczniku użyj poniższego kodu, który przefiltruje dane tabeli na podstawie wyszukiwania:

funkcja filtrTableFunc ()
var filterResult = Dokument.getElementById („wyszukiwanie”).wartość.TolowerCase ();
var opróżniający = dokument.getElementById („pracownik”);
var tr = opróżniający.getElementsBaTagname („tr”);
dla (var i = 1; i < tr.length; i++)
tr [i].styl.display = "none";
const tdarray = tr [i].getElementsBaTagname („td”);
dla (var j = 0; j -1)
tr [i].styl.display = "";
przerwa;

W powyższym kodzie:

• Najpierw zdefiniuj funkcję „FilterTableFunc ()".
• Uzyskaj dostęp do paska wyszukiwania za pomocą jego identyfikatora „szukaj„Aby uzyskać wprowadzoną wartość i przekonwertować ją na małe litery za pomocą„Tolowercase ()" metoda.
• Uzyskaj odniesienie do tabeli, w której operacja filtra będzie wykonywana za pomocą jego identyfikatora ”pracownik".
• Następnie uzyskaj wiersze tabeli za pomocą „getElementsBaTagname" metoda.
• Iteruj tabelę do długości, uzyskaj dane dla każdego wpisu tabeli i sprawdź, czy przechowywana wartość tabeli jest równa wyszukiwanej wartości. Jeśli tak, wyświetl to.

Wyjście

Powyższe wyjście wskazuje, że operacja filtra została pomyślnie zastosowana do tabeli.

Wniosek

Tabela może być filtrowana w JavaScript, iterując dane tabeli i zwracając odpowiednie dane. To filtrowanie odbywa się za pomocą funkcji wywołanej określonym zdarzeniem. Takie podejście będzie działać w taki sposób, że na wprowadzonych danych identycznych odpowiednie dane z tabeli są pobierane, niezależnie od czułości sprawy w polu tekstowym wejściowym. Ten post opisuje podejście, które można zastosować do filtrowania tabeli w JavaScript.