WMP Webstandards

Tabellenzeilen mit verschiedenen Farben

zurück zur Übersicht

Mit diesem JavaScript werden die Zeilen einer Tabelle abwechslungsweise mit zwei verschiedenen Farben formatiert

function color(id, c1, c2) {
  if(document.getElementById(id)) {
    var trs = (document.getElementById(id).getElementsByTagName("tbody").length) ? document.getElementById(id).getElementsByTagName("tbody")[0].getElementsByTagName("tr") : document.getElementById(id).getElementsByTagName("tr");
    for(var i=0; i<trs.length; i++)
    trs[i].style.backgroundColor = (i%2) ? c1 : c2;
  }
}

window.onload = function() {
  color("daten", "#fff", "#edf3fe");
}

Die Funktion color() erwartet vier Parameter:

  1. Die ID der Tabelle (hier: "daten")
  2. Die erste Farbe (hier: "#fff")
  3. Die zweite Farbe (hier: "#edf3fe")

Beim Laden der Seite wird die Funktion color() aufgerufen, welche alle Zeilen (tr) aus dem möglicherweise enthaltenen tbody der Tabelle mit der angegebenen ID ausliest. Diese werden dann abwechslungsweise mit den Hintergrundfarben versehen.

Hier kann man sich noch eine Demo ansehen.

Kommentare







02.07.2005 Löschen

Goliath

Noch ein Hinweis darauf, dass die Verwendung von Javascript hierfür mit CSS3 überflüssig wird:
www.w3.org

18.07.2005 Löschen

Labuschin.com

Jap, auf CSS 3.0 kann man sich echt freuen

21.08.2007 Löschen

de1m

Bis jetzt unterstützen immer noch nicht alle Browser CSS2 und es ist schon mehrere Jahre, mit CSS3.0 wird es glaube ich genau solang dauern...leider!

Von fphilipe. Letzte Änderung am 01.07.2005