Mehrere Variablen bündeln

[Gunnar Bittersmann]

@@borisbaer

function filterTable( e ) {

Wofür steht e?

    let filter = e.target.value.toUpperCase();

Ah, vermutlich für ein Event. Dann sollte der Parameter auch so benannt sein: event.

filter taucht im Folgenden nirgendwo rechts vom Gleichheitszeichen auf, d.h. es wird kein neuer Wert zugewiesen; es ist ein Konstante. let ist falsch, const ist richtig.

Gleiches gilt für tr, td0, td1 und td2.

Argl, tr. Der Bezeichnung ist nicht anzusehen, dass in der Konstanten(!) mehrere Zeilen (ein Array) gespeichert wird. Nicht

    let tr = document.querySelector( 'tbody' ).rows;

sondern

    const rows = document.querySelector( 'tbody' ).rows;

---

    for ( let i = 0; i < tr.length; i++ ) {

        let td0 = tr[i].cells[0].textContent.toUpperCase();
        ⋮
    }

Die 2000er haben angerufen. Sie hätten gerne ihre Old-school-Schleifen zurück.

Mit der erwähnten Umbenennung in rows:

    for ( let row of rows ) {

        const td0 = row.cells[0].textContent.toUpperCase();
        ⋮
    }

Wofür steht td0? Nicht für ein td-Element, sondern für dessen Textinhalt (transformiert in Großbuchstaben). Die Benennungen td0, td1 und td2 sind also ebenfalls schlecht.

Und warum nicht sowas wie (ungetestet)

    for ( let row of rows ) {

        const cellContents = row.cells.map(x => x.textContent.toUpperCase());
        ⋮
    }

Statt td0, td1 und td2 dann cellContents[0], cellContents[1] bzw. cellContents[2].

---

        tr[i].style.display =
            td0.indexOf( filter ) > -1 ||
            td1.indexOf( filter ) > -1 ||
            td2.indexOf( filter ) > -1
            ? "" : "none";

Nein!! Man sollte i.d.R. niemals mit JavaScript Werte von CSS-Eigenschaften setzen, sondern Änderungen im DOM machen. Zum Verstecken bietet HTML das hidden-Attribut:

        tr[i].hidden = 
            td0.indexOf( filter ) > -1 ||
            td1.indexOf( filter ) > -1 ||
            td2.indexOf( filter ) > -1
            ? false : true;

Wobei man gleich den Booleschen Wert zuweisen kann:

        tr[i].hidden = !(
            td0.indexOf( filter ) > -1 ||
            td1.indexOf( filter ) > -1 ||
            td2.indexOf( filter ) > -1
        );

Mit de Morgan kriegt man auch die Negation weg:

        tr[i].hidden = 
            td0.indexOf( filter ) == -1 &&
            td1.indexOf( filter ) == -1 &&
            td2.indexOf( filter ) == -1;

(Ebenfalls ungetestet. Zu tr[i] und td0, td1, td2 siehe oben.)

🖖 Живіть довго і процвітайте