Zur Navigation

Neue Tabellenzeile per Klick einfügen

1 Jerry02 (Gast)

Hallo liebes Forum,

Und zwar muss ich gerade eine HTML Seite erstelen in der ein Formular ist. Aus diesem Formular werden die Daten dann in eine Tabelle unter dem Formular ausgegeben bzw. hereingeschrieben.
Nun so weit so gut. Ich bin so weit gekommen, dass die Daten aus dem Formular in die Tabelle eingefügt werden, allerdings werden die bei erneuter Eingabe in das Formular wieder gelöscht und die neuen Daten in die Tabelle eingefügt. Nun ist das Problem dass bei dem buton klick ebenfalls eine neue Tabellenzeile eingefügt werden müsste, um die vorherigen daten nicht zu löschen.
Hat da jemand ne idee?

MfG
Jerry

19.08.2010 10:53

3 Jerry02 (Gast)

Mir wurde noch empfohlen, dass ich die eingetragenen werte in einem Array zwischenspeichern soll und die beim erneuten Aufrufen der Funktion wieder mit ausgeben soll!
aber da bräuchte ich ja trotzdem den appendChild() befehl oder?

19.08.2010 13:49

4 Jörg Kruse

Wenn du mit appendChild() arbeitest, musst du nichts in einem Array zwischenspeichern. Das wäre wohl notwendig, wenn man die Tabelle nach jedem Klick als ganzes neu aufbauen möchte. Mit appendChild() kannst du dagegen ein einzelnes Kindelement (in diesem Fall die neue Tabellenzeile) einfach hinter das letzte aktuelle Kindelement anhängen.

19.08.2010 13:59

5 Jerry02 (Gast)

Also ich kann ja mal meinen HTML Text hier rein Posten so weit bin ich bis jetzt gekommen. Ich weiß auch garnicht ob das überhaupt so richtig ist, da ich absoluter Anfänger bin und das meine erste Aufgabe mit Javascript ist. So weit funktioniert es ja auch:

<html>
<head>
<title>Portfolio Management System</title>

<script type="text/javascript">

function Aendern ()
{
var WKN = document.getElementById('WKN').value;
var Kurs = document.getElementById('Kurs').value;
var Name = document.getElementById('Name').value;
var Stueck = document.getElementById('Stueck').value;
var Kategorie = document.getElementById('Kategorie').value;
var Gesamtwert = Stueck*Kurs;

document.all.WKN1.innerHTML = WKN;
document.all.Name1.innerHTML = Name;
document.all.Kategorie1.innerHTML = Kategorie;
document.all.Anzahl1.innerHTML = Stueck;
document.all.Kurs1.innerHTML = Kurs;
document.all.Gesamtwert1.innerHTML = Gesamtwert;

document.forms[0].reset();
}
</script>

Also es sollen sozusagen die Werte aus dem Formular in die untere Tabelle übernommen werden, die Formularfelder wieder geleert und das Wertpapier sortiert in die Tabelle eingefügt werden.

Mein Problem ist nun, dass immer nur ein Wertpapier in die Tabelle eingefügt wird und es bei erneuter Eingabe durch die neuen Werte ersetzt wird.

ich hab ein bisschen mit appendChild() herumexperimentiert, aber nichts hat so wirklich geklappt. Ich dachte es funktioniert, wenn man der Tabellenzeile eine Id zuweist, doch irgendwie bekomme ich über der Tabelle immer die Meldung: [object HTMLDivElement]
Vielleicht können Sie mir bei meinem Problem helfen!?

Mit freundlichen Grüßen

Jerry

19.08.2010 15:20

6 Jerry02 (Gast)

Ich würde Ihnen gerne noch meinen HTML code dazugeben, aber irgendwie funktioniert es nicht. Es zeigt mir immer wieder Fehler an beim Posten.

19.08.2010 15:25

7 Jörg Kruse

Ja, sorry, da hat wohl der Spamfilter zugeschlagen :-\ wenn du dich anmeldest und einloggst, sollte das mit dem Eintragen des Codes aber problemlos gehen

19.08.2010 15:43 | geändert: 19.08.2010 15:44

8 Jerry02

So hier nun mal der komplette Code. Wie gesagt ich weis nicht ob dieser überhaupt nur ansatzweise richtig ist, weil ich das zum ersten mal mache und mich erst den 4.Tag überhaupt damit beschäftige.

<html>
<head>
<title>Portfolio Management System</title>

<script type="text/javascript">

function Aendern () 
	{
		var WKN = document.getElementById('WKN').value;
		var Kurs = document.getElementById('Kurs').value;
		var Name = document.getElementById('Name').value;
		var Stueck = document.getElementById('Stueck').value;
		var Kategorie = document.getElementById('Kategorie').value;
		var Gesamtwert = Stueck*Kurs;

		document.all.WKN1.innerHTML = WKN;
		document.all.Name1.innerHTML = Name;
		document.all.Kategorie1.innerHTML = Kategorie;
		document.all.Anzahl1.innerHTML = Stueck;
		document.all.Kurs1.innerHTML = Kurs;
		document.all.Gesamtwert1.innerHTML = Gesamtwert;

		document.forms[0].reset();
		}
</script>
</head>
<body>


<h1>Portfolio Management System</h1>

<form name="Maske">
	<table id="Tabelle1" border="0" cellpadding="0" cellspacing="4">
		<tr>
			<th align="right">WKN:</th>
			<th><input name="WKN" type="text" size="30" maxlenth="30" id="WKN"></th>
			<th align="right">Kurs:</th>
			<th><input name="Kurs" type="text" size="30" maxlenth="30" id="Kurs"></th>
			<th align="left">Euro</th>
		</tr>
		<tr>
			<th align="right">Name:</th>
			<th><input name="Name" type="text" size="30" maxlenth="30" id="Name"></th>
			<th align="right">Stück:</th>
			<th><input name="Stueck" type="text" size="30" maxlenth="30" id="Stueck"></th>
		</tr>
		<tr>
			<th align="right">Kategorie:</th>
			<th><input name="Kategorie" type="text" size="30" maxlenth="30" id="Kategorie"></th>
			<th><input type="button" tabindex="2" value="hinzufügen" onClick="Aendern ();">
			
		</th>
		</tr>
	</table>
</form>
	<br>
	<br>


<table border="1">
	<tr>
		<th>WKN</th>
		<th>Name</th>
		<th>Kategorie</th>
		<th>Anzahl</th>
		<th>Kurs</th>
		<th>Gesamtwert</th>
	</tr>
	<tr id="Tabellenzeile">
		<td><p id="WKN1"></p>
			<a href="javascript:Aendern()"></a></td>
		<td><p id="Name1"></p>
			<a href="javascript:Aendern()"></a></td>
		<td><p id="Kategorie1"></p>
			<a href="javascript:Aendern()"></a></td>
		<td><p id="Anzahl1"></p>
			<a href="javascript:Aendern()"></a></td>
		<td><p id="Kurs1"></p>
			<a href="javascript:Aendern()"></a></td>
		<td><p id="Gesamtwert1"></p>
			<a href="javascript:Aendern()"></a></td>
	</tr>
	</table>


</body>
</html>

19.08.2010 15:54

9 Jörg Kruse

Ok, als erstes musst du der Tabelle, wo die Daten eingefügt werden sollen, eine ID geben, z.B. "Tabelle2". Dann ist sie als Elternknoten ansprechbar.

Ich merke grad, dass man auch die Tabellenzellen über appendChild() einfügen muss. Aber den Inhalt der Zellen inkl. <p> und <a> kannst du dann einfach über innerHTML einfügen. Das Einfügen der Tabellenzeile und der ersten beiden Zellen sollte so ausschauen:

var newTR = document.createElement("tr");
document.getElementById("Tabelle2").appendChild(newTR);
var newTD1 = document.createElement("td");
newTD1.innerHTML = '<p id="WKN1">' + WKN + '</p><a href="javascript:Aendern()"></a>';
newTR.appendChild(newTD1);
var newTD2 = document.createElement("td");
newTD2.innerHTML = '<p id="Name1">' + Name + '</p><a href="javascript:Aendern()"></a>';
newTR.appendChild(newTD2);
/* etc. */

Das verwendest du einfach anstelle der "document.all.WKN1.innerHTML = WKN;" etc. Die anderen Zellen (TD3 etc.) musst du dir noch entsprechend ergänzen

19.08.2010 16:22 | geändert: 19.08.2010 16:25

10 Jerry02

genau das meinte ich!
super ich bin ihnen unendlich dankbar!
es gibt zwar jetzt noch das Problem, dass die erste tabellenzeile leer bleibt und das formular erst in der nächsten ausgegeben wird aber das ist doch schonmal ein riesen fortschritt...für mich :)! sie haben mir echt weiter geholfen ich glaube darauf wäre ich niemals gekommen!
Vielen Dank nochmal!

19.08.2010 16:48 | geändert: 19.08.2010 16:56