Javascript: Suchfunktion --> Was wird hier im Code gemacht?

Logithan

Grünschnabel
Javascript:
function suchfunktion() {

    const input = document.getElementById("suchfunktion");
    const tr = document.getElementsByTagName("tr");

    for (let i = 1; i < tr.length; i++) {
        if (tr[i].innerHTML.includes(input.value)) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
    }

}

Guten Tag,

ich bin Anfänger und verstehe leider den Code nicht. Ich weiß nur, dass es für die Suche ist, die in dem Beispiel auch funktioniert.
Kann mir jmd. bitte Zeile für Zeile erklären, was gemacht wurde, damit ich es besser nachvollziehen kann?

Danke im Vorraus.
 
Zuletzt bearbeitet von einem Moderator:

Sempervivum

Erfahrenes Mitglied
Poste diesen Code besser in Textforum und mit Codetags (die drei Punkte rechts von dem Landschaftssymbol und dann </>), dann kann man einfach die Erklärungen als Kommentare hinzu fügen.
 

Sempervivum

Erfahrenes Mitglied
Javascript:
function suchfunktion() {

    // Das Eingabefeld, wo der Suchbegriff eingegeben wird, bereit stellen:
    const input = document.getElementById("suchfunktion");

    // Eine Nodelist (Liste) der Tabellenzeilen bereit stellen:
    const tr = document.getElementsByTagName("tr");

        // Schleife über alle Tabellenzeilen:
        // Die erste mit dem Index 0 wird dabei ausgeschlossen
        // weil es sich um den Kopf der Tabelle handelt
        for (let i = 1; i < tr.length; i++) {
            // Prüfen ob das HTML der Tabellenzeile den Suchbegriff enthält:
            if (tr[i].innerHTML.includes(input.value)) {
                // Suchbegriff gefunden: Die Zeile wird sichtbar gemacht:
                tr[i].style.display = "";
            } else {
                // Suchbegriff nicht gefunden: Die Zeile wird verborgen:
                tr[i].style.display = "none";
            }
    }

}
 
Zuletzt bearbeitet von einem Moderator:

Logithan

Grünschnabel
Hey, dieser Code gehört noch dazu.... Weißt du für was onkeyup steht bzw. was es in dem Zusammenhang macht?

Code:
<div class="input-group">
            <input type="text" class="form-control" id="suchfunktion"
                onkeyup="suchfunktion()" placeholder="Suchbegriff eingeben..">
            <span class="input-group-text">&#128269</span>

        </div>
 

Sempervivum

Erfahrenes Mitglied
"keyup" bedeutet: Die Taste wurde losgelassen, "keydown": Sie wurde gedrückt. Ersteres feuert also wenn der Benutzer gerade eine Eingabe über die Tastatur gemacht hat. Das ist auch gleich der Nachteil bei diesem Event: Man kann auch mit Rechtsklick Eingaben machen oder Zeichen löschen. Dabei feuert dann dieses Event nicht.
 

Quaese

Moderator
Moderator
Hi,

wenn du oninput statt onkeyup verwendest, sollte der Event immer feuern, wenn sich im input etwas ändert. Also auch bei Rechtsklick, Kopieren usw.

Ciao
Quaese
 

Neue Beiträge