JavaScript-Tabellenfilter oder Suche | So fügen Sie Filter in HTML-CSS-Tabellen hinzu

Blog

JavaScript-Tabellenfilter oder Suche | So fügen Sie Filter in HTML-CSS-Tabellen hinzu

JavaScript-Tabellenfilter oder Suche | So fügen Sie Filter in HTML-CSS-Tabellen hinzu

Wie können wir mithilfe von JavaScript eine Such- oder Filteroption in einer HTML-Tabelle hinzufügen? Lösung: JavaScript-Tabellenfilter oder Suche, Filter in HTML-CSS-Tabelle hinzufügen.

Zuvor habe ich a . geteilt Responsive Tabelle Design, Aber wie können wir eine Filteroption in der hinzufügen Tisch . Vielleicht haben Sie auf einigen Websites gesehen, wo Sie nach einem bestimmten suchen können Zustand in der Tabelle . Wenn Sie jemals ein Backend-Dashboard von Websites besucht haben, wissen Sie wahrscheinlich, dass wir es sein können herausfiltern für jeden Benutzer, indem Sie einige Bedingungen festlegen.

Heute lernst du zu kreieren Filteroption für die HTML-Tabelle mit JavaScript . Mit diesem Programm können Sie nach bestimmten Tabelleninhalten suchen, indem Sie nach Name, E-Mail, ID usw. suchen. Dies ist a kurzes & reines JavaScript-Programm zum Tabellenfilter , können Sie dies auf jeder Art von Tabelle an jedem Ort verwenden. Sie können dies für Ihr nächstes Projekt verwenden, ich weiß es zu verwenden jQuery wir können schaffen erweiterte Filterfunktionen . Aber es ist, um zu zeigen, wie wir das Feature erstellen können mit reinem JS .

Also, heute teile ich JavaScript-Tabellenfilter oder Suche für HTML-Tabellen. Grundsätzlich ist dieses Programm für Filter in HTML- und CSS-basierter Tabelle hinzufügen. Ich habe benutzt Bootstrap zum Erstellen des Tabellenlayouts und verwendet CSS ein wenig zum Styling. In dieser Tabelle habe ich einige Daten hinzugefügt, Sie fügen je nach Bedarf weitere hinzu. Oder eine andere Möglichkeit ist, den JS-Code zu verwenden und ihn selbst zu verwenden Tisch .

Wenn du jetzt denkst, wie das ist Filtertabelle tatsächlich ist, dann sehen Sie die Vorschau unten angegeben.

kohls app funktioniert nicht

Vorschau des Hinzufügens von Filtern in HTML-CSS-Tabellen

Sehen Sie sich diese Videovorschau an, um eine Vorstellung davon zu bekommen, wie das geht Filterprogramm sieht so aus .


Jetzt können Sie dies visuell sehen. Wenn dir das gefällt, dann hol dir das Quellcode von seiner.

Sie können auch mögen:

  • JavaScript-Portfoliofilter
  • Mehrstufiges Formular
  • Text suchen und hervorheben
  • Animiertes Newsletter-Anmeldeformular

JavaScript-Tabellenfilter oder Quellcode suchen

Vor Quellcode teilen , Lass uns darüber sprechen. Wie Sie wissen, ist dies eine HTML-Tabelle, die ich verwendet habe Bootstrap & CSS zu das Layout erstellen . Dies ist ein einfaches |_+_| und |_+_| basierten Tabelle. In den Filterfeldern habe ich HTML data-* (get info) Attributsuche und Sortierung verwendet. In der CSS-Datei einige Elemente wie Überschrift, Tabelle gestylt. Wie Sie im sehen können Vorschau der Tabellen sind in ungerader-gerade-Reihenfolge gefärbt. Für die Erstellung habe ich CSS :nth-of-type()-Eigenschaft verwendet.

Im JavaScript-Abschnitt erstelle ich eine Variable namens var TableFilter und füge alle Funktionen darin ein. In HTML haben wir benutzerdefinierte Daten mit dem Data-*-Element gespeichert, jetzt ruft JS sie mit der .getAttribute-Methode ab. Jetzt Javascript finden Sie Text filtern Verwenden einer Funktion namens function _filter(row) Wenn Daten mit der Eingabe übereinstimmen, wird dies angezeigt.

Ich weiß, dass der JS-Code schriftlich erklärt wird. Sie werden es automatisch verstehen, nachdem Sie die Codes erhalten haben. Wenn Sie JavaScript-Kenntnisse haben, werden Sie es auf jeden Fall verstehen.

Um dieses Programm zu erstellen, müssen Sie 3 Dateien erstellen. Zuerst für HTML , zweiter für CSS , & dritte für JavaScript . Befolgen Sie die Schritte, um dies ohne Fehler zu erstellen.

index.html

Text in Photoshop texturieren

Erstellen Sie eine HTML-Datei mit dem Namen ‘ index.html ‘ und geben Sie diese hier unten angegebenen Codes ein.

style.css

Erstellen Sie nun eine CSS-Datei mit dem Namen ‘ style.css ‘ und geben Sie diese Codes ein.

function.js

Der letzte Schritt, Erstellen Sie eine JavaScript-Datei namens ‘ function.js ‘ und geben Sie die Codes ein.

 Light Javascript Table Filter 

Table Filter JavaScript

Name Email Phone No ID
John Doe john.doe@gmail.com 0123456789 01
Alen Fox Alen.fox@gmail.com 0155456789 02
Rakesh Sharma rakesh.sharma@gmail.com 6754328901 03
Bunty Singh Bunty.singh@gmail.com 5678241598 04
Sushant Rajput sushant.rajput@gmail.com 675457801 05
Sunny Sharma sunnysharma@gmail.com 675123451 06
Saurav Gupta saurav.gupta@gmail.com 61234801 07
Appu Khote appu.khote@gmail.com 67894561 08
Sandeep Arya sandeep.arya@gmail.com 741852963 09
Vijay Mehra vijay.mehra@gmail.com 456851982 10

Das ist es. Jetzt haben Sie erfolgreich einen JavaScript-Tabellenfilter oder eine Suche erstellt. Mit anderen Worten, Filter in HTML-CSS-Tabelle hinzufügen. Wenn Sie Zweifel oder Fragen haben, kommentieren Sie unten.

reagieren native picker ios

Vielen Dank für Ihren Besuch, besuchen Sie weiter. Wenn dir dieser Beitrag gefallen hat, teile ihn mit all deinen Programmierfreunden!

Dieser Beitrag wurde ursprünglich veröffentlicht Hier

#html #html5 #css #css3 #javascript #tableau #web-entwicklung