000
27.04.2010, 11:10 Uhr
~FreiherrEintritt_
Gast
|
Ich versuche, mit JavaScript Elemente aus zwei Tabellen hin und her zu schieben:
- zwei HTML Tabellen A und B
- Array aus Elementen, entweder "zugeordnet" (Tabelle A) oder "nicht zugeordnet" (B)
- jede Zeile in Tabelle A enthält "-" Button zum Entfernen eines Elements (=> Verschiebung nach B)
- jede Zeile in Tabelle B enthält "+" Button zum Hinzufügen eines Elements (=> Verschiebung nach A)
=> Problem: Dynamische Generierung von HTML Elementen und Java-Script Eventhandlern
Ansatz:
| C++: |
var lst = array(); // Array aus Elementen, wir zu Beginn von <body> gefüllt
function drawTables(doc) {
// Pointer auf bereits existierende Tabllen
var tabA = doc.getElementById("tabA");
var tabB...
// alle Zeilen in A und B löschen
...
// Zeilen neu aufbauen
for(var i=0; i<lst.length; i++) {
var newLine = doc.createElement("tr");
// Inhalt hinzufügen
var cellName = doc.createElement("th");
var txtName = doc.createTextNode("..");
cellName.appendChild(txtName);
var cellNochwas...
...
var cellOption = doc.createElement("th");
var imgOption = doc.createElement("img");
var tab;
if("gehört zu A oder B") { // info steht in lst-Array
imgOption.src = "remove Button";
imgOption.onclick = function(){ removeElement(doc, i); };
tab = tabA;
} else {
imgOption.src = "add Button";
imgOption.onclick = function(){ addElement(doc, i); };
tab = tabB;
}
// zeile der Tablle hinzufügen
cellOption.appendChild(imgOption);
newLine.appendChild(cellOption);
tab.appendChild(newLine);
}
}
function add/removeElement(doc, index) {
// ändert lst Array gemäß den neuen Zurodnungen
drawTables(doc);
}
|
Das ganze soll so funktionieren, dass die <img> tags die Funktionen removeElement und addElement mit den entsprechenden i-Parametern aufrufen, um sich selbst hinzuzufügen oder zu entfernen.
Allerdings kommt in den beiden Funktionen als index immer die gleiche Zahl an, nämlich lst.length, so als würde die Variable i nach der Schleife bestehen bleiben und als Übergabeparameter genommen werden. |
