Max Xyz: Filtern in Javascript

Ich hab eine ziemlich einfach Frage, kenne mich selbst nicht sehr gut aus mit html/javascript etc. Ist es möglich, mehrere Tabellenzeilen (mit ganzen Sätzen) darauf zu überprüfen, ob sie ein bestimmtes Wort enthalten? Danke schon mal im Vorraus (:

  1. Hallo Max,

    Ist es möglich, mehrere Tabellenzeilen (mit ganzen Sätzen) darauf zu überprüfen, ob sie ein bestimmtes Wort enthalten?

    schau dir mal dieses Script an: http://anthonybush.com/projects/jquery_fast_live_filter/

    Etwas größer: https://www.datatables.net/

  2. Ich hab eine ziemlich einfach Frage, kenne mich selbst nicht sehr gut aus mit html/javascript etc. Ist es möglich, mehrere Tabellenzeilen (mit ganzen Sätzen) darauf zu überprüfen, ob sie ein bestimmtes Wort enthalten?

    Ja, im ersten Schritt musst du mit JavaScript Zugriff auf die Tabellenzeilen erhalten:

    var zeilenListe = document.querySelectorAll('table#foo tr');
    

    In der Variablen zeilen ist jetzt eine NodeList gespeichert, die alle Tabellenzeilen enthält, also noch ungefiltert. Eine NodeList hat leider keine fertige Methode, um die Einträge schnell zu filtern, deshalb wäre es hier hilfreich für uns, wenn wir aus der NodeListe zunächst ein Array machen, bevor wir die Daten weiterverarbeiten.

    var zeilenArray = Array.prototype.slice.call(zeilenListe);
    

    Jetzt haben wir ein Array, das wir vergleichsweise einfach filtern können:

    var gefiltertesArray = zeilenArray.filter(wortFilter);
    

    Der Methodenaufruf zeilenArray.filter() etwartet eine sogenannte Callback-Funktion als Paramater. Diese Callback-Funktion bekommt ihrerseits eine einzelne Tabellenzeile als Paramater übergeben und muss dann entscheiden, ob die die Tabellenzeile behalten oder verworfen wird. Diese Funktion müssen wir uns noch schreiben:

    function wortFilter (zeile) {
       var wortRegExp = /\btest\b/;
       return wortRegExp.test( zeile.textContent );
    }
    

    Diese Funktion testet eine Zeile darauf, ob sie das Wort "test" enthält.

    Irgendwie möchtest du sicher, die Ergebnisse visualisieren. Dafür kannst du den betroffenen Zeilen nun eine HTML-Klasse vergeben. Mit CSS kannst du anschließend die Darstellung anpassen:

    gefiltertesArray.forEach(function(zeile){
       zeile.classList.add('nichtgefiltert');
    });
    

    Wenn du die Filter-Funktion ggf. mehrfach hintereinander auslösen willst, dann musst du auch dafür sorgen, dass die 'nichtgefiltert' vor dem zweiten Filterdruchgang wieder von allen Zeilen entfernt wird. Das überlasse ich dir als Übung.