Programmierung – Javascript –
Übersichtliche Tabellen

Je länger eine Tabelle, desto unübersichtlicher wird sie. Abhilfe schafft das farblich unterschiedliche Markieren einzelner Tabellenzeilen. Mit ein wenig HTML-Code lässt sich dies schnell bewerkstelligen. Kompliziert wird das Ganze erst dann, wenn man eine umfangreiche Tabelle nachträglich einfärben möchte oder Zeilen löscht oder hinzufügt. Mit ein wenig Javascript-Code können Sie das Einfärben der Zeilen bequem dem Webbrowser überlassen undmüssen nur noch festlegen,welche Farben zumEinsatz kommen sollen. ImKopfbereichder Seite werden dazu drei Funktionen definiert. Die beiden ersten Funktionen greifen mit Hilfe des Objekts node auf die entsprechenden HTML-Elemente zu. Da hierbei dieWebbrowser Mozilla sowie der Internet Explorer jeweils anders arbeiten, sind zwei Funktionen erforderlich. Folgender Code gilt für den Internet Explorer:

function zeilenwechsel_ie(id) {
tabelle =document.getElementById(id);
l1 = tabelle.firstChild.childNodes.length;
for(i=0; izeile = tabelle.firstChild.childNodes[i];
l2 = zeile.childNodes.length;
for(j=0; j

function zeilenwechsel_moz (id) {
tabelle =document.getElementById(id);
l1 = tabelle.childNodes[1].childNodes.length;
for(i=0; il2 = zeile.childNodes.length;
for(j=1; j}}}

Damit die passende Funktion zum Einsatz kommt,ist eine Browserweiche notwendig:

function zeilenwechsel(id) {if(navigator.appName == “MicrosoftInternet Explorer”) {
zeilenwechsel_ie(id);
} else {zeilenwechsel_moz (id);
}}

Im body-Tag rufen Sie eine dritte Funktion auf, um die Tabelle beim Laden der Seite einzufärben:

Die einzelnen Tabellen müssen Sie nun nur noch mit der entsprechenden ID versehen:

Zur Nutzung des Javascript-Programms für mehrere Tabellen auf einer Seite rufen Sie die Funktion zeilenwechsel(id) mehrfach über das body-Tag auf.