• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabellenzeile aus dynamischer Tabelle löschen

ombole

Neues Mitglied
Nabend!
Ich versuche gerade zur Übung ein kleines einfaches Personalverwaltungssystem µit HTML zu erstellen. Über einen Button wird ein neue Zeile erzeugt welches mit Daten aus 2 Textfelder befüllt wird + einer ID und einem Button um diesen Eintrag löschen zu können:

Nummer-->Name-->Adresse-->Funktion
1-->Max Mustermann-->Musterstr5--> LÖSCHBUTTON
2-->Dieter Meier-->Meierstr5-->LÖSCHBUTTON
....
...
...
Bis auf das mit dem löschen habe ich es auch soweit hinbekommen. Beim löschen hapert es ein wenig bzw. genauer gesagt hapert es daran, dass ich nicht genau weiß wie ich beim Klick auf einem Button den aktuellen Zeilenindex bekomme. Die erste möglich wäre doch, dass ich mit dem onclick-Event dies lösen könnte (bezogen auf die Tabellenzeile), da wenn ich ja auf einen Button klicke, ich ja automatisch auch auf die Tabellenzeile klicke !?
Würde ja bei einer statischen Tabelle so aussehen:
Code:
<tr onclick="myFunktion(this)">
...
...
function myFunction(x){
var ZeilenIndex = x.rowIndex;
Alternative würde es ja auch mit dem onmouseover-Event funktionieren! Also die Idee ist da, aber von der Umsetzung her stehe ich auf dem Schlauch. Ich poste mal meinen Code:
Code:
 function AddZeile(){
        var anzahlzeilentbl = document.getElementById("tbl").getElementsByTagName("tr").length -1;
        var nummer = 1;
        var tabellen_id = "tbl";
        var trhtml = document.getElementById( "tbl").insertRow( nummer );
        var tdhtml1 = document.createElement( "td" );
        var tdhtml2 = document.createElement( "td" );
        var tdhtml3 = document.createElement( "td" );
        var tdhtml4 = document.createElement( "td" );
        var Name = document.getElementById("txtName").value;
        var Adresse = document.getElementById("txtAdresse").value;

        tdhtml1.innerHTML =  anzahlzeilentbl+1;
        tdhtml2.innerHTML = Name;
        tdhtml3.innerHTML = Adresse;
        tdhtml4.innerHTML = tdhtml4.innerHTML + "<br><button  type='button'  onclick='Zeilenindexthis)' >Löschen</button><br>";
       trhtml.appendChild( tdhtml1 );
        trhtml.appendChild( tdhtml2 );
        trhtml.appendChild( tdhtml3 );
        trhtml.appendChild( tdhtml4 );
        document.getElementById("tbl").appendChild(trhtml);


    }
    function Zeilenindex(x) {
        alert(x.rowIndex); //Undefined
    }
btw: Wie kriege ich denn anschließend, wenn ich Zeile x gelöscht kriege, am geschicktesten eine entsprechende Einrückung hin ?
Bedanke mich! =)
 
Werbung:
Zurück
Oben