Dynamische Tabelle mit DOM-Scripting

**Gerbil** · 24-10-2012, 16:56

Hallo,

ich möchte gerne eine dynamische Tabelle erstellen.

Die Tabelle soll später immer eine Überschrift haben und 3 Zeilen dazu anzeigen -> momentan nur eine kleine Beispieltabelle vorhanden.

Über 2 Buttons die sich über der Tabelle befinden, nämlich + und - sollen entweder Tabellenzeilen hinzugefügt oder gelöscht werden.

Die Funktion mit dem Hinzufügen funktioniert bisher ganz gut, nur mit der löschenfunktion habe ich probleme.

Code:

<html>
<head>
<title>blub</title>

<script language="JavaScript">
	
	function add(){
	//alert("add aufgerufen");
	
	var rowNr = 11;
	var colNr = 2;

	var formTable = document.getElementById("formTable").getElementsByTagName("tbody")[0];
	var body = document.getElementsByTagName("body")[0];
	var tabelle = document.getElementsByTagName("table")[0];

	for(var i = 0; i<rowNr; i++)
		{
			var newRow = document.createElement("tr");
		}
		for(var j = 0; j<colNr; j++)
			{
				var newCol1 = document.createElement("td");
				newCol1.innerHTML = "Blub";
				newCol1.setAttribute("border", "1px solid black");
				newRow.appendChild(newCol1);
			}

	formTable.appendChild(newRow);
	}
		
	function remove(){

}
	}
</script>
</head>
<body>
<h1> test </h1>
<form>
	<input type="button" name="+" value="+" onclick="add();">
	<input type="button" name="-" value="-" onclick="remove();">
</form>
	<table id="formTable">
		<tr>
			<th></th>
			<th></th>
		</tr>
	</table>
</body>
</html>

Danke schonmal für eure Hilfe

**ein schlauer** · 24-10-2012, 20:42

Schmeiss das language weg und ein Dokument braucht einen Doctype.

Das ganze geht deutlich einfacher:

HTML-Code:

<!DOCTYPE HTML>
<html>
<head>
<title>blub</title>

<script type="text/javascript">
function addCells(row, nr, inhalt) {
	
	for(var i = 0; i < nr; i++) {
		var tmp = row.insertCell(i);
		tmp.innerHTML = inhalt;
	}
	
}
	
function add(id){
	var formTable = document.getElementById("formTable").tBodies[0];
	
	var row = formTable.insertRow(formTable.rows.length);
	addCells(row, 2, 'blub');
}
function remove(id, wo) {
	var formTable = document.getElementById("formTable").tBodies[0];
	var row = formTable.deleteRow(wo ? formTable.rows.length - 1 : 0);
}


</script>
</head>
<body>
<h1> test </h1>
<form>
	<input type="button" name="+" value="+" onclick="add('formTable');">
	<input type="button" name="-" value="-" onclick="remove('formTable');">
</form>

	<table id="formTable">
		<tr>
			<th></th>
			<th></th>
		</tr>
	</table>
</body>
</html>