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

[Logithan]

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.

 

[Sempervivum]

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.

 

[Logithan]

Hallo, ist erledigt. Danke für den Tipp.

 

[Sempervivum]

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";
            }
    }

}

 

[Logithan]

Wow, vielen lieben Dank. Jetzt verstehe ich den Code und der ganze Ablauf macht sinn. Top, ich danke Dir.

 

[Logithan]

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

<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]

"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]

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