JavaScript: Dynamisches Tabellen-Element per ID wieder löschen

LordZed

Hi! Ich habe ein kleines Problem mit dem ich zur Zeit kämpfe:

Ich habe eine Tabelle mit einer Zeile, die eine eindeutige ID hat. Über einen Button kann ich dieser Tabelle nun weitere Zeilen hinzufügen, die oben an die Tabelle angefügt werden und ebenfalls eine eindeutige ID bekommen. Jede Zeile besteht aus zwei Spalten:

- Die erste beinhaltet einen Freitext
- Die zweite einen Link zum Löschen der Zeile

In diesem Link wird an eine Funktion die eindeutige ID der Zeile übergeben in der diese dann gelöscht wird. Nun kommen wir zum Problem:

Wenn ich noch keine Zeile hinzugefügt habe, funktioniert alles problemlos! Sobald ich aber auf eines der dynamisch erstellten Elemente mit der Funktion document.getElementById(id) zugreifen will geht das nicht mehr, sprich ich kann mit dieser Funktion irgendwie nur die statischen Elemente erreichen. So sehen die beiden Funktionen aus:

Code

function delRow(row)
{
    var rowIndex = document.getElementById(row).sectionRowIndex;
    alert(rowIndex + " / " + row);
    document.getElementById(row).parentElement.deleteRow(row);
}


function addFunk()
{
    var TD1text = prompt("Funktionsname:", "");

    if (TD1text != null)
    {
        var ID = Math.round((Math.random()*1000));

        var TR = document.getElementById("tb_funk").insertRow(0);
        TR.ID = "funk_" + ID;


        var TD1 = document.createElement("td");
        var TD1text = document.createTextNode(TD1text);
        TD1.appendChild(TD1text);

        var TD2 = document.createElement("td");
        var link = document.createElement("a");
        link.href = "javascript:delRow('funk_" + ID + "')";
        var LinkText = document.createTextNode("Löschen");
        link.appendChild(LinkText);
        TD2.appendChild(link);

        TR.appendChild(TD1);
        TR.appendChild(TD2);
    }
}

Alles anzeigen

LordZed

Jetzt hab ich noch nen anderen Fehler entdeckt, der das Löschen betrifft:

Wenn ich eine Zeile lösche hat er immer die erste gelöscht egal welche ich auswähle. Lag daran, dass ich deleteRow(row) und nicht deleteRow(rowIndex) gemacht habe. Das ändert leider aber nochimmer nichts daran, dass getElementById(row) nicht funktioniert, wenn ich die Zeile per JS hinzugefügt habe!

LordZed

OK! Problem behoben! Bei der Zuweisung der ID muss das "id" - also kleingeschrieben - werden, so dass es dann so aussieht:

row.id = ID;

so funktioniert es wunderbar

Tags