Dynamische klickbare Tabellen

[Megatron]

Hallo,

ich habe ein Problem bei der Tabellenerstellung.
Ich habe zunächst eine Abfrage aus einer Datenbank (mit php), deren Ergebnis in ein 2D Array geschrieben wird.
Die Liste lässt sich dann per Javascript nach den einzelnen Spalten sortieren.
Selbst der MouseOver-Spaß funktioniert wie er soll (obwohl mir das nicht nicht direkt klar ist wieso ;-) )
Nur mit dem onclick habe ich ein Problem.
Statisches setzten ist ja kein Thema - würde auch funktionieren.
Nur soll halt je nach Zeile ein anderer Link ausgeführt werden.

Hier mal zur veranschaulichung ein Teil als HTML

  
<table id="Tabelle>  
    <thead>  
        <th>Artikel-ID</th>  
        <th>Hersteller</th>  
        <th>Modell</th>  
        ...  
    </thead>  
    <tbody>  
        <tr bgcolor="#A1E1A9" onclick=Weiter("12345") onmouseover="style.backgroundColor='#2C7935'" onmouseout=="style.backgroundColor='#A1E1A9'">  
            <td>12345</td>  
            <td>Nokia</td>  
            <td>6500</td>  
        </tr>  
        <tr bgcolor="#A1E1A9" onclick=Weiter("34567") onmouseover="style.backgroundColor='#2C7935'" onmouseout=="style.backgroundColor='#A1E1A9'">  
            <td>34567</td>  
            <td>Nokia</td>  
            <td>N73</td>  
        </tr>  
        ...  
    </tbody>  
</table>  

Wie gesagt - der Wert in der Variable Weiter ist hier das Problem, da ich hier in allen Zeilen den letzten zugewiesenen Wert habe (was nicht unbedingt gewollt ist).
Ansonsten entspricht der Parameter immer der ID in der 1. Spalte (was vielleicht hilfreich sein könnte).
Ach ja noch ein wenig vom aktuellen Javascript

  
function Weiter(Ref_ID) {  
    document.Formular.id_wert.value = Ref_ID;  
    document.Formular.action = "naechste_seite.php";  
    document.Formular.submit();  
}  
  
...  
for(zaehler=0; zaehler < Arrayeintraege; zaehler++)  
{  
    ...  
    var TR = document.getElementById("Tabelle").insertRow(-1);  
    ...  
    tmpvar = ARRAY[zaehler][0];  
    TR.onclick = function(){Weiter(tmpvar)};  
    ...  
}  
...  

[ChrisB]

Hi,

Wie gesagt - der Wert in der Variable Weiter ist hier das Problem, da ich hier in allen Zeilen den letzten zugewiesenen Wert habe (was nicht unbedingt gewollt ist).

for(zaehler=0; zaehler < Arrayeintraege; zaehler++)
{
    var TR = document.getElementById("Tabelle").insertRow(-1);
    tmpvar = ARRAY[zaehler][0];
    TR.onclick = function(){Weiter(tmpvar)};

Das Problem ist hier, dass die Funktion zu dem Zeitpunkt, zu dem der Event passiert, mit tmpvar als Parameter aufgerufen wird - und dann natuerlich mit dessen aktuellem Wert.

Closures helfen das zu umgehen.

MfG ChrisB

[Struppi]

Ach ja noch ein wenig vom aktuellen Javascript

function Weiter(Ref_ID) {
    document.Formular.id_wert.value = Ref_ID;
    document.Formular.action = "naechste_seite.php";
    document.Formular.submit();
}

...
for(zaehler=0; zaehler < Arrayeintraege; zaehler++)
{
    ...
    var TR = document.getElementById("Tabelle").insertRow(-1);
    ...
    tmpvar = ARRAY[zaehler][0];
    TR.onclick = function(){Weiter(tmpvar)};
    ...
}
...

  
Du solltest die Funktion dynamisch von einer Hilfsfunktion erstellen lassen:  
  
~~~javascript
function createOnClick(param) {  
   return function() {  
      Weiter(param);  
   };  
}

und der Aufruf:
TR.onclick = createOnClick(ARRAY[zaehler][0]) ;

Du solltest dringend globale Variabeln vermeiden, auch wenn das nicht für dein aktuelles Problem verantwortlich ist, wirst du damit aber früher oder später deinen Ärger bekommen.

Struppi.

[Megatron]

Du solltest die Funktion dynamisch von einer Hilfsfunktion erstellen lassen:

function createOnClick(param) {

return function() {
      Weiter(param);
   };
}

>   
> und der Aufruf:  
> `TR.onclick = createOnClick(ARRAY[zaehler][0]) ;`{:.language-javascript}  
>   
> Du solltest dringend globale Variabeln vermeiden, auch wenn das nicht für dein aktuelles Problem verantwortlich ist, wirst du damit aber früher oder später deinen Ärger bekommen.  
>   
> Struppi.  
  
Danke für die Hilfe - damit funktioniert das ganze sogar :)  
In PHP war das irgendwie einfacher, aber 100 mal die Seite neu laden ist auch nicht die Wonne...  
  
Mal sehen, wann ich soweit Javascript brauche, das ich die globalen Variablen verfluche. Bis dahin machen sie mir das Leben erstmal noch einfacher...

[Struppi]

Mal sehen, wann ich soweit Javascript brauche, das ich die globalen Variablen verfluche. Bis dahin machen sie mir das Leben erstmal noch einfacher...

Du bist schon soweit, denn dein Problem schneidet auch das an. Und einfacher sind auf jeden Fall lokale Variabeln, es ist nur so, dass wenn du aus der PHP Ecke kommst das nicht gewohnt bist, denn dort sind per default alle Funktionsvariabeln lokal und du musst sie explizit global deklarieren, also umgekehrt wie in den meisten anderen Programmiersprachen.

Struppi.