So filtern Sie die Tabelle in JavaScript

Während des Erstellens einer großen HTML -Tabelle auf der Seite ist es wichtig, eine Filterfunktion für eine bessere Benutzererfahrung einzuschließen. Verwenden Sie dazu JavaScript, um Datensätze in einer Tabelle zu filtern, indem Sie in einem Suchfeld nach einem Tabellendatensatz suchen. Darüber hinaus bietet JavaScript -Code weniger Codezeilen, um effizient zu arbeiten.

Dieser Blog -Beitrag definiert den Prozess der Filterung der Tabelle in JavaScript.

So filtern Sie die Tabelle in JavaScript?

Lassen Sie uns ein Beispiel sehen, das erklärt, wie Sie eine Tabelle in JavaScript filtern.

Beispiel
Erstellen Sie zunächst eine Suchleiste in einem HTML -Dokument mit dem “Onkeyup”Eigenschaft, die das nennen“filtertableFunc ()Wenn der Schlüssel veröffentlicht wird:

Erstellen Sie eine Tabelle, in der Mitarbeiterdaten mit dem gespeichert werden

Tag und eine ID zuweisen “posteedata”:

Name	Email	Geschlecht	Bezeichnung	Beitrittsdatum
John	John@Google Mail.com	Männlich	CPA	5/5/2020
Stephen	[email protected]	Männlich	HRM	21/10/2020
Mari	[email protected]	Weiblich	HRM	16/05/2022
Rhonda	[email protected]	Männlich	CFA	23/06/2022

Nach Ausführung der HTML -Datei sieht die Ausgabe so aus:

Danach fügen wir der Filtertabelle Funktionalität 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 ()
var filterResult = Dokument.GetElementById ("Suche").Wert.TolowerCase ();
var empsable = Dokument.GetElementById ("peopeedata");
var tr = empipable.GetElementsByTagName ("tr");
für (var i = 1; i < tr.length; i++)
tr [i].Stil.display = "keine";
const tdarray = tr [i].GetElementsByTagName ("TD");
für (var j = 0; j -1)
tr [i].Stil.display = "";
brechen;

Im oben gegebenen Code:

• Definieren Sie zuerst eine Funktion “filtertableFunc ()”.
• Greifen Sie mit der ID auf die Suchleiste zu. “suchen”Um den eingegebenen Wert zu erhalten und ihn mit dem“ in einen Kleinbuchstaben umzuwandelnTolowerCase ()" Methode.
• Erhalten Sie einen Verweis auf die Tabelle, in der der Filtervorgang mit seiner ID durchgeführt wirdposteedata”.
• Holen Sie sich dann die Tischreihen mit dem "GetElementsByTagName" Methode.
• Durch die Tabelle bis zu ihrer Länge iterieren, die Daten für jeden Tabelleneintrag abrufen und prüfen, ob der gespeicherte Wert der Tabelle dem durchsuchten Wert entspricht. Wenn ja, dann zeigen Sie es an.

Ausgang

Der obige Ausgang zeigt an, dass der Filtervorgang erfolgreich auf die Tabelle angewendet wurde.

Abschluss

Eine Tabelle kann in JavaScript filtriert werden. Diese Filterung erfolgt durch eine Funktion, die ein bestimmtes Ereignis auffordert. Dieser Ansatz funktioniert so, dass die entsprechenden Daten aus der Tabelle bei identischen Daten unabhängig von der Fallempfindlichkeit im Feld Eingabetext abgerufen werden. Dieser Beitrag beschreibt einen Ansatz, mit dem eine Tabelle in JavaScript gefiltert werden kann.