Zeile in dynamischer Tabelle löschen

dasmein · 03. Mai 2017

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! =)

kkapsner · 12. Mai 2017

Ich würde da gar nicht mit Zeilennummer oder IDs runhantieren. Erzeuge dir den Button direkt mit dem Eventlistener so, dass er Zugriff auf die Zeile hat:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<table id="table">
	<tr><th>A</th><th>B</th><td></td></tr>
</table>
<button id="add">hinzufügen</button>
<script type="text/javascript">
document.getElementById("add").addEventListener("click", function(){
	var table = document.getElementById("table");
	var row = document.createElement("tr");
	var td1 = document.createElement("td");
	td1.textContent = Math.random();
	row.appendChild(td1);
	var td2 = document.createElement("td");
	td2.textContent = Math.random();
	row.appendChild(td2);
	var td3 = document.createElement("td");
	var button = document.createElement("button");
	button.textContent = "X";
	button.addEventListener("click", function(){
		table.removeChild(row);
	});
	td3.appendChild(button);
	row.appendChild(td3);
	table.appendChild(row);
});
</script>
</body>
</html>

Zeile in dynamischer Tabelle löschen

dasmein

New member

kkapsner

Super Moderator