nicht angemeldet
Hier nochmal ein vollständiges Beispiel für Event-Delegation. Man definiert nur den einen zentralen Event-Handler, dafür ist die Handler-Funktion etwas komplizierter. Man sucht sich das TR-Element heraus und ändert dort die Klassen. Die ganze Formatierung habe ich in die Klassen ausgelagert. Das ist alles etwas komplizierter, als es müsste, weil du gesagt hast, dass IE 6 unterstützt werden muss.
<!doctype html>
<html>
<head>
<script>
[code lang=javascript]/* Phase 1 */
window.onload = initTableRowHighlight;
/* Phase 2 */
function initTableRowHighlight () {
document.getElementById("tabelle").onclick = tableRowHighlight;
}
/* Phase 3 */
function tableRowHighlight (e) {
/* Vereinheitliche den Zugriff auf das Event-Objekt und das Zielelement */
if (!e) {
e = window.event;
}
var target = e.target || e.srcElement;
/* Steige im Elementbaum ausgehend vom Zielelement auf und suche das zugehörige TR-Element.
Wenn zuerst TABLE gefunden wird, dann breche ab. Dann werden wir nämlich kein TR mehr finden
(außer bei verschachtelten Tabellen). */
var el = target, tagName;
do {
tagName = el.nodeName.toLowerCase();
if (tagName == "tr") {
/* TR gefunden! */
break;
}
if (tagName == "table") {
return;
}
} while (el = el.parentNode); /* Steige über parentNode auf */
/* IE 6 kann keine multiplen Klassen. Also machen wir es zu Fuß. */
var className = el.className;
if (className == "highlight" || className == "secondhighlight") {
/* Lösche »highlight« aus dem Klassennamen, wenn vorhanden */
el.className = className.replace("highlight", "");
} else {
/* Füge »highlight« zum Klassennamen hinzu */
el.className += "highlight";
}
}
</script>
<style>
table {
border-spacing: 0;
border-collapse: collapse;
}
tr {
background-color: white;
margin: 10px; padding: 10px;
}
tr.second {
background-color: #ddd;
}
tr.highlight,
tr.secondhighlight {
border: 1px solid black;
}
/* Highlight von geraden Zeilen */
tr.highlight {
background-color: #eef;
}
/* Highlight von ungeraden Zeilen */
tr.secondhighlight {
background-color: #bbf;
}
td {
border: 1px solid #ccc;
padding: 5px;
}
</style>
</head><body>
<table id="tabelle">
<tr><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
<tr class="second"><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
<tr><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
<tr class="second"><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
<tr><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
<tr class="second"><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
<tr><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
<tr class="second"><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td><td>bla<strong>bla</strong></td></tr>
</table>
</body></html>[/code]
Ich weiß nicht, in wie weit du deinen Code anpassen kannst, damit du dieses Modell verwenden kannst. Wie du konkret die Farben änderst, ist ja auch egal - du musst nicht mit Klassen arbeiten, auch wenn das viel übersichtlicher ist. Der Aufbau der Event-Handler-Funktion dürfte allerdings gleich sein: Zielelement ansprechen, TR-Element heraussuchen, dort die Formatierungen ändern abhängig vom gegenwärtigen Status.
Mathias
Auge
Gunnar Bittersmann
JürgenB
Struppi