PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Javascript-Problem: Funktionsparameter zur Laufzeit übergeben


ZapBee
2007-11-14, 09:45:46
Hi,

ich will per Javascript Tabellenzeilen einfügen und mit Eventhandlern versehen.
Beim Mouseover soll die Zeile mit der entsprechenden ID eingefärbt werden und bei Mouseout wieder entfärbt.
for (id = 0; id < 10; id++){
var neueZeile = document.createElement("tr");
neueZeile.id = id;
neueZeile.onmouseover = function (){rowHighlight(id)};
neueZeile.onmouseout = function (){rowNormal(id)};
}

Aber egal, wo ich mit der Maus bin, nur die letzte Zeile wird ge-"highlight"-ed. Ich ahne auch, woran es liegt, kann es aber nicht lösen. Habe schon was über Closures gelesen und damit experimentiert, komme nicht weiter.
Könnte mir jemand einen Hinweis geben?

Danke schonmal
Zap

Trap
2007-11-14, 10:12:02
Ich hab keine Ahnung von Javascript, aber von Sprachen mit Closures. Probier mal rowHighlight(id) durch rowHighlight(neueZeile.id) zu ersetzen.

ZapBee
2007-11-14, 11:09:27
habe gerade im Firebug gesehen, dass die Events richtig gesetzt sind, aber falsch abgearbeitet werden.
also da steht

<tr id="1" onmouseover="rowHighlight('1')" ... >...</tr>

aber er highlighted stattdessen die letzte Zeile
sehr seltsam...

Zap

Also zur Laufzeit der Schleife macht er alles richtig, aber wenn er später bei einem mouseover die Zeile mit der ID x highlighten soll, holt er den aktuellen Wert der Variablen (also den nach Schleifenende), nicht den damaligen. Ich müßte diesen Wert irgendwie konservieren...

ZapBee
2007-11-14, 11:56:56
Ich glaube, ich habe hier ein Closure gebaut, dass ich garnicht will. Die Variable id soll nach Ende der Funktion garnicht mehr zur Verfügung stehen, ich müßte die zur Laufzeit der Schleife irgendwie auswerten und einbauen.
Ich würds ja mit
neueZeile.onmouseover = "rowHighlight(id)";
machen, aber Eventhandler kann man so nicht setzen...

EDIT: Heureka!
ich habe immer dieselbe anonyme Funktion an die Eventhandler gebunden.
neueZeile.onmouseover = function (){rowHighlight(this.id);};
nimmt zur Ausführungszeit der Funktion rowHighlight mit "this" die id des aufrufenden Objekts! Und dat jeht! :D