Zur Navigation

Neue Tabellenzeile per Klick einfügen [2]

11 Jörg Kruse

Die leere Tabellenzeile im HTML-Teil kannst du auch rausnehmen

19.08.2010 16:55

12 Jerry02

ja ich habs grad hingekriegt!
Danke nochmal!:)

19.08.2010 16:57

13 Jerry02

Hallo Forum,
ich muss euch leider nochmal nerven.
Und zwar habe ich jetzt noch eine Spalte in die Tabelle eingefügt mit dem Namen "Aktion".
Diese soll dann z.B. die Zeile, in der man das Button anklickt in der Tabelle wieder Löschen.
Also die Variable für die Spalte ist:

var Aktion = ('<a href="">Kurs ändern</a>  <a href="">Anzahl ändern</a>  <a href="" onClick="loeschen ();">löschen</a>');

Jetzt habe ich ein neues Skript erstellt mit der Funktion

function loeschen ()
{
		document.getelementById("Tabelle2").removeChild(document.getElementById("Tabelle2").firstChild;
		}

Das ist wahrscheinlich denke ich der richtige Ansatz ein Kindelement der Tabelle2 wieder zu löschen, aber an der Ausführung hapert es ein bisschen :(!

Vielleicht können sie mir nochmal helfen?

20.08.2010 09:03

14 Jerry02

Ich hätte ja jetzt diese Funktion gedacht aber bis jetzt tut sich nichts! :)

function loeschen ()
	{
		var Knoten = document.getelementById("Tabelle2").firstChild;
		loeschen = document.getElementsById("Tabelle2").removeChild(Knoten);
	}

20.08.2010 09:11

15 Jörg Kruse 

var Aktion = ('<a href="">Kurs ändern</a>  <a href="">Anzahl ändern</a>  <a href="" onClick="loeschen ();">löschen</a>');

Die Klammern sind da wohl zuviel - udn wie baust du das weiter unten ein?

Ich würde das direkt so machen:

var newTD6 = document.createElement("td");
newTD6.innerHTML = '<a href="">Kurs ändern</a>  <a href="">Anzahl ändern</a>  <a href="" onClick="loeschen ();">löschen</a>';
newTR.appendChild(newTD6);

Falls es dann noch nicht funktioniert: was sagt denn die JavaScript(-Fehler)-Konsole des Browsers?

20.08.2010 09:53 | geändert: 20.08.2010 09:54

16 Jerry02

ja das habe ich ja gemacht das sieht dann bei mir so aus:

est das so in kurzfassung nur mit dem löschen Link
:
var Aktion = <'a href="javascript:loeschen()">löschen</a>');

und danach im Script weiter unten, damit dies Genauso wie die Formulardaten in die Tabelle eingefügt werden:

var newTD7 = document.createElement("td");
		newTD7.innerHTML = '<p id="Aktion1">' + Aktion + '</p><a href="javascript:Aendern()"></a>';
		newTR.appendChild(newTD7);

Ich brauche ja aber eine neue Funktion, dass wenn man auf löschen clickt, eine gesamte Tabellenzeile glöscht wird.

20.08.2010 10:14

17 Jörg Kruse

Deine Funktion loeschen() sollte die erste Zeile von Tabelle2 löschen. Wenn es das nicht tut, liegt der Fehler womöglich woanders, z.B. dass der onclick wegen eines Syntaxfehlers nicht funktioniert. Hier hast du z.B. immer noch eine Klammer zuviel und das erste Hochkomma ist falsch gesetzt:

var Aktion = <'a href="javascript:loeschen()">löschen</a>');

Ansonsten kann wie gesagt die JavaScript-Konsole Aufschluss über Fehler geben

20.08.2010 10:21

18 Jerry02

irgendwie wird mir in der fehlerkonsole angezeigt:
document.getElementById is not a function!
was ist da los?
ich glaub ich mach was falsch!?

20.08.2010 15:54

19 Jerry02

So sieht es bis jetzt aus.
Leider funktionieren die Buttons Kurs ändern und Anzahl ändern auch noch nicht.

<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;
		var Aktion = '<a href="javascript:Kursaendern()">Kurs ändern</a>  <a href="javascript:Anzahlaendern()">Anzahl ändern</a>  <a href="javascript:loeschen()">löschen</a>';
		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);
		var newTD3 = document.createElement("td");
		newTD3.innerHTML = '<p id="Kategorie1">' + Kategorie + '</p><a href="javascript:Aendern()"></a>';
		newTR.appendChild(newTD3);
		var newTD4 = document.createElement("td");
		newTD4.innerHTML = '<p id="Stueck1">' + Stueck + '</p><a href="javascript:Aendern()"></a>';
		newTR.appendChild(newTD4);
		var newTD5 = document.createElement("td");
		newTD5.innerHTML = '<p id="Kurs1">' + Kurs + '</p><a href="javascript:Aendern()"></a>';
		newTR.appendChild(newTD5);
		var newTD6 = document.createElement("td");
		newTD6.innerHTML = '<p id="Gesamtwert1">' + Gesamtwert + '</p><a href="javascript:Aendern()"></a>';
		newTR.appendChild(newTD6);
		var newTD7 = document.createElement("td");
		newTD7.innerHTML = '<p id="Aktion1">' + Aktion + '</p><a href="javascript:Aendern()"></a>';
		newTR.appendChild(newTD7);
		document.forms[0].reset();
		}
</script>

<script language="Javascript">
function Kursaendern ()
	{
		var Kursaendern = prompt ("Geben Sie bitte den neuen Kurs ein.", "");
		newTD4.innerHTML = '<p id="Stueck1">' + Anzahlaendern + '</p><a href="javascript:Anzahlaendern()"></a>';
		newTR.replaceChild(newTD4);

	}
	
function Anzahlaendern ()
	{
		var Anzahlaendern = prompt ("Hier die neue Anzahl eingeben.", "");
		newTD4.innerHTML = '<p id="Stueck1">' + Anzahlaendern + '</p><a href="javascript:Anzahlaendern()"></a>';
		newTR.replaceChild(newTD4);
	}
	
function loeschen ()
	
	{
		var Knoten = document.getElementsById("Tabelle2");
		loesche = document.getElementsById("Tabelle2").removeChild(Knoten);
	}

		

</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="0" cellpadding="0" cellspacing="4">
		<tr>
			<th align="right" valign="top">Sortiere die Tabelle nach:</th>
			<th>
				<SELECT NAME=Sortierung>
					<OPTION>WKN <OPTION>Name <OPTION>Kategorie <OPTION>Anzahl <OPTION>Kurs <OPTION>Gesamtwert
				</SELECT> 
			</th>
			<th>
			<a href="">absteigend</a>
			</th>
			<th>
			<a href="">aufsteigend</a>
			</th>
		</tr>
	</table>
	

<br>
<br>
<br>
<table id="Tabelle2" border="1">
	<tr>
		<th>WKN</th>
		<th>Name</th>
		<th>Kategorie</th>
		<th>Anzahl</th>
		<th>Kurs</th>
		<th>Gesamtwert</th>
		<th>Aktion</th>
	</tr>
	
		<p id="WKN1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Name1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Kategorie1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Stueck1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Kurs1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Gesamtwert1"></p>
			<a href="javascript:Aendern()"></a>
		<p id="Aktion1"></p>
			<a href="javascript:Aendern()"></a>
	
	</table>


</body>
</html>

Das mit dem sortieren ist ja erstmla unwichtig! ich will da lieber step by step durchgehen!

20.08.2010 15:58 | geändert: 20.08.2010 15:59

20 Jörg Kruse

getElementById schreibt sich ohne s:

function loeschen ()
	
	{
		var Knoten = document.getElementsById("Tabelle2");
		loesche = document.getElementsById("Tabelle2").removeChild(Knoten);
	}

20.08.2010 16:15