Felder dynamisch erstellen

[JesusFreak777]

Felder dynamisch erstellen und löschen

Hallo,

ich möchte gerne inputfelder dynamisch erstellen,...

var Zeile = 1;
function add_input(){ 
	var tr = document.getElementById('articles').insertRow(Zeile);
	Zeile += 1;

	var td1 = document.createElement('td');
	
	var input1 = document.createElement('input');
		input1.type = 'text';
		input1.name = 'anzahl[]';
		
	td1.appendChild(input1);		
		
	tr.appendChild(td1);
	
}

irgendwie funktioniert das nicht,... kann mir da jemand eine hilfestellung geben?

ich möchte gerne in eine tabelle zeilen einfügen und in die zeilen dann spalten,... aber das haut irgendwie nicht so hin wie ich das will

 

[JesusFreak777]

Habs hinbekommen,... war ein Fehler in meiner Tabelle,...

jetzt noch ne weitere frage,... mit diesen script kann ich jetzt tabellenzeilen erstellen,...
es wird auch gleich ein butten erzeugt der die zeile dann wieder löschen sollte,... aber irgendwie geht das nicht,... was tun?

<script type="text/javascript">
<!--
var Zeile = 1;
function add_input(){ 
	var tr = document.getElementById('articles').insertRow(Zeile);
	Zeile += 1;

	var td1 = document.createElement('td');
	
	var input1 = document.createElement('input');
		input1.type = 'text';
		input1.name = 'anzahl[]';
		
	td1.appendChild(input1);	

	
	var td2 = document.createElement('td');

	var input2 = document.createElement('input');
		input2.type = 'text';
		input2.name = 'article[]';

	td2.appendChild(input2);		


	var td3 = document.createElement('td');

	var button=document.createElement('input');
		button.type = 'button';
		button.className = 'button small';
		button.onclick=function(){delete_input(this);};
		button.value = 'loeschen';

	td3.appendChild(button);		
		
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	
}

function delete_input(feld){ 
	feld.parentNode.parentNode.removeChild(feld.parentNode);
}

//-->
</script>

<?PHP

echo '
<form method="post" action="dynamicfields.php">

	<table id="articles">
	
		<tr><td><input name="anzahl[]" type="text" /></td><td><input name="article[]" type="text" /></td><td></td></tr>
			
	</table>
	
	<p><input class="button right" onclick="add_input();" type="button" value="Datei hinzufuegen" /></p>


<input type="submit" /></form>';



?>

 

[rd4eva]

Ganz einfach weil:
feld.parentNode.parentNode = TableRow
feld.parentNode = TableCell

Demzufolge sagst du mit:
feld.parentNode.parentNode.removeChild(feld.parentNode);

Das in der Reihe in der auf den Button geklickt wurde nur die Zelle gelöscht werden soll in der sich der Button befindet.

 

[JesusFreak777]

ok, danke,... aber irgendwie kann ich jetzt noch nichts mit anfangen,...

so wie der Quelltext ist löscht er nur den Button,... aber der Rest bleibt bestehen

* Hilfe*

 

[rd4eva]

so wie der Quelltext ist löscht er nur den Button

Nö. Das hab ich gerade versucht zu erklären. Du löschst nicht den Button sondern die Zelle in der der Button steht.

Versuchs mal so
feld.parentNode.parentNode.parentNode.removeChild(feld.parentNode.parentNode);

 

[JesusFreak777]

wow, Danke

so weit habe ich nicht gedacht, das dass dreimal da stehen muss,...

jetzt funktioniert das erstellen und das löschen,... allerdings sobald ich eine Zeile gelöscht habe, kann ich keine neuen mehr erstellen, warum das?

 

[rd4eva]

Wenn du eine Zeile hinzufügst machst du Zeile += 1

var Zeile = 1;
var tr = document.getElementById('articles').insertRow(Zeile);
Zeile += 1;

Also musst du folglich was machen wenn du eine Zeile löschst?

 

[jesusShuttlesworth]

Ich habe noch zusätzlich versucht, das Erstellen und Löschen mit gewissen Keycodes auf der Tastatur zu versehen. Allerdings macht mir bei Abfangen der delete_input Funktion der this-Parameter anscheinend Probleme, d.h. ich kann über Tastendruck nichts löschen. Wenn ich die Funktion delete_input(this); über Button-Click aufrufe, wird mir als Testausgabe ein [object HTMLInputElement] ausgegeben.
Versuche ich jedoch, die Funktion zu Löschen über einen Key-Event, hier die Esc-Taste, abzufangen, wird im Test ein [object HTMLDocument] ausgegeben. Anscheinend interpretiert der Event-Handler den this-Paramter anders als bei onClick(). Irgendjemand eine Idee warum, und wie man das lösen kann?