JavaScript/Tutorials/Datensatzauswahl aus Tabelle

Oft kommt es vor, dass man Datensätze aus einer Datenbank (oder aus einer sonstigen Datenquelle) als tabellarische Liste anzeigen will, um dem Besucher die Möglichkeit zu geben, einen oder mehrere Datensätze auswählen.

Andreas Wächter hatte vor vielen Jahren einen SelfHTML-Aktuell Artikel geschrieben, indem er eine Variante des Checkbox-Hacks mit JavaScript kombiniert hatte. Hier soll eine rein JavaScript-basierte Version vorgestellt werden.

Vorgehensweise

Auswahl einzelner Zeilen

Beispiel ansehen …

 var rows = document.getElementById('auswaehlbar').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (i = 0; i < rows.length; i++) {
        rows[i].addEventListener('click', function() {
            alert(this.rowIndex + 1);
        });
    }

Mit getElementById und getElementsByTagName werden die einzelnen tr-Elemente der Variablen rows zugewiesen. Jede Zeile wird mit addEventListener anklickbar gemacht. Ein Klick ruft eine Funktion auf, die mit rowIndex die Zeilennummer ausgibt. Da die Zählung mit 0 beginnt, wird der Wert vor der Ausgabe um 1 erhöht.

Hinzufügen und Entfernen einer Klasse

Beispiel ansehen …

/* Zebra-Streifen für ungerade Zeilen */
tr:nth-child(odd) { 
  background-color: #eee; 
}

/* 2. und 3. Spalte rechtsbündig */
td:nth-of-type(2),td:nth-of-type(3) {
  text-align: right;
}

/* Markierung, dass Zeile ausgewählt ist  */
tr.markiert {
  background-color: lime;
}

 var rows = document.getElementById('auswaehlbar').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (i = 0; i < rows.length; i++) {
        rows[i].addEventListener('click', function() {
            this.classList.toggle('markiert');
        });
    }

Anstelle der alert-Warnung wird nun mit classList.toggle die Klasse .markiert hinzugefügt. Durch die toggle-Methode wird die Klasse bei einem weiteren Klick wieder entfernt.