Supportnet Computer
Planet of Tech

Supportnet / Forum / Skripte(PHP,ASP,Perl...)

per Button klick neue tabellenzeile JS





Diskussionsgruppen
Betriebsysteme
Windows 7
WindowsVista
WindowsXP
Linux
BS-Sonstige
Software
Textverarbeitung
Tabellenkalkulation
Datenbanken
Bildbearbeitung
Audio/mp3/Video
Security/Viren
E-Mail/Outlook
Internet Browser
SW-Sonstige
Hardware
Mainboard/CPU/RAM
Grafikkarten
Peripherie
HW Sonstiges
Netzwerk
DSL
W-Lan
Telekommunikation
NW-Sonstiges
Programmierung
Skripte(PHP,ASP,Perl...)
Webseiten/HTML
Sonstiges
PC-Sonstiges
Plauderecke

Frage

Moin Moin, ich habe eine Frage an die JS-Freunde: wie kann ich mittels JS ( Klick auf Button) eine neue Zeile an das Tabellenende anfügen? 1 Tabelle mit 1 zeile zum daten eingeben vorhanden. Der bisherige Versuch klappt zwar gut aber er kopiert mir den Inhalt (value) mit der in der Formularzeile steht und das soll er ja nicht. Wie mache ich das am besten? <script type="text/javascript"> <!-- function addRow(strID){ // Zweite Tabellenzeile clonen var objRowNode = document.getElementById(strID).getElementsByTagName('tr')[1].cloneNode(true); // An das Ende des TBODYs einhängen document.getElementById(strID).appendChild(objRowNode); /* strID*/ <button onclick="return addRow('tbodyID');">Weitere eingeben</button> Karsten return false; } //--> </script>

Antwort 1 von son_quatsch

Versuch es stattdessen mal mit folgender Funktion (ungetestet):

function addRow(strID){
  // Erste Tabellenzeile clonen
  var objNodes= document.getElementById(strID).getElementsByTagName('tr');
  var objRowNode= objNodes[0].cloneNode(true);

  // An das Ende des TBODYs einhängen
  document.getElementById(strID).appendChild(objRowNode);

  var objChilds= objRowNode.childNodes;
  for (var i= 0; i< objChilds.length; i++) {
    if (objChilds.nodeName.toUpperCase()== 'INPUT') objChilds.value= '';
  }

  return false;
}
Sollte es nicht wie gewünscht funktionieren, wäre die vollständige HTML-Seite als Code von Vorteil.

Antwort 2 von PapaKarsten

<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tbody id="tbodyID">
    <tr>
    <th class="searchLabel">a</th>
    <th class="searchLabel">b</th>
    <th class="searchLabel">c</th>
    <th class="searchLabel">d</th>
    <th class="searchLabel">e</th>
    <th class="searchLabel">f</th>
    <th class="searchLabel">g</th>
    <th class="searchLabel">h</th>
    </tr>
    <tr>
<td><input name="Array[a][]" type="text" maxlength="11" size="11" value="" ></td>
    <td><input name="Array[]" type="text" maxlength="50" size="40" value="" ></td>
  <td><select name="Array[c][]" size="1" class="searchField">
        <option value="Ja">Ja</option>
        <option value="Nein">Nein</option>
      </select></td>
      <td><select name="Array[d][]" size="1" class="searchField">
        <option value="Ja">Ja</option>
        <option value="Nein">Nein</option>
      </select></td>
    <td><input name="Array[e][]" type="text" maxlength="20" size="20" value="" ></td>
    <td><input name="Array[f][]" type="text" maxlength="20" size="20" value="" ></td>
    <td><input name="Array[g][]" class="searchHeadline"  type="text" maxlength="4" size="4" value="" ></td>
    <td></td>
    </tr>
  </tbody>
</table>


hier mal die ganze Datei. Es soll so sein das man eine Zeile ausfüllt und wenn man noch eine möchte, klickt man auf den Button "Weitere eingeben" und dann soll die erste zeile stehen bleiben, darunter eine zweite erscheinen, die aber wie beschrieben mit leeren Textfeldern erscheinen soll.

Antwort 3 von son_quatsch

Na siehste, damit kann ich sehr viel mehr anfangen:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de" dir="ltr"><head>
	<title>adding rows, the clean way</title>
	<script type="text/javascript">
		function checkLevel(nodes) {
			for (var i= 0; i< nodes.length; i++) {
				if (nodes.nodeName.toUpperCase()== 'INPUT') nodes.value= '';
				if (nodes.hasChildNodes()) checkLevel(nodes.childNodes);
			}
		}

		function addRow(strID) {
			// Zweite Tabellenzeile clonen (weil erste "Header" ist)
			var objNodes= document.getElementById(strID).getElementsByTagName('tr');
			var objRowNode= objNodes[1].cloneNode(true);

			// An das Ende des TBODYs einhängen
			document.getElementById(strID).appendChild(objRowNode);

			if (objRowNode.hasChildNodes()) checkLevel(objRowNode.childNodes);

			return false;
		}
	</script>
	<style type="text/css">
		th {
			font: 13px verdana;
			padding: 0px 0px 5px 0px;
			background-color: #D6D0DB;
		}
	</style>
</head><body>
	<table width="600" border="0" cellspacing="0" cellpadding="0">
		<tbody id="tbodyID"><tr>
			<th class="searchLabel">a</th>
			<th class="searchLabel">b</th>
			<th class="searchLabel">c</th>
			<th class="searchLabel">d</th>
			<th class="searchLabel">e</th>
			<th class="searchLabel">f</th>
			<th class="searchLabel">g</th>
			<th class="searchLabel">h</th>
		</tr><tr>
			<td><input name="Array[a][]" type="text" maxlength="11" size="11" value="" /></td>
			<td><input name="Array" type="text" maxlength="50" size="40" value="" /></td>
			<td><select name="Array[c][]" size="1" class="searchField">
				<option value="Ja">Ja</option>
				<option value="Nein">Nein</option>
			</select></td>
			<td><select name="Array[d][]" size="1" class="searchField">
				<option value="Ja">Ja</option>
				<option value="Nein">Nein</option>
			</select></td>
			<td><input name="Array[e][]" type="text" maxlength="20" size="20" value="" /></td>
			<td><input name="Array[f][]" type="text" maxlength="20" size="20" value="" /></td>
			<td><input name="Array[g][]" class="searchHeadline"  type="text" maxlength="4" size="4" value="" /></td>
			<td></td>
		</tr></tbody>
	</table>

	<button onclick="return addRow('tbodyID');">Weitere eingeben</button>

</body></html>


Antwort 4 von son_quatsch

Achja, da war irgendwo [ b ] drin, deswegen sieht es jetzt so aus. Die entsprechende Stelle kannst du sicher selbst fixen ;-)

Antwort 5 von PapaKarsten

Hallo,

viele Dank für Deine Bemühungen. Allerdings übernimmt er immernoch die Values der ersten Eingabezeile.



Zitat:
Achja, da war irgendwo [ b ] drin, deswegen sieht es jetzt so aus. Die entsprechende Stelle kannst du sicher selbst fixen ;-)


jupp

Antwort 6 von son_quatsch

Zitat:
Allerdings übernimmt er immernoch die Values der ersten Eingabezeile
Nicht nachvollziehbar, diesmal hab ich es getestet. Browser: FFOX 1.5.0.5 / MSIE 6.0 / OPER 9.02, jeweils auf WinXP SP1.

Ich brauche mehr Details

Antwort 7 von PapaKarsten

habe XP SP 2 IE 6.0

ja das mit js is schon so ne Sache. Werde das ganze wohl oder übel anders machen müssen. Viell. ja mit php:

abfrage (Button gedrückt){

echo"><tr>
<td><input name="Array[a][]" type="text" maxlength="11" size="11" value="" /></td>
<td><input name="Array" type="text" maxlength="50" size="40" value="" /></td>
<td><select name="Array[c][]" size="1" class="searchField">
<option value="Ja">Ja</option>
<option value="Nein">Nein</option>
</select></td>
<td><select name="Array[d][]" size="1" class="searchField">
<option value="Ja">Ja</option>
<option value="Nein">Nein</option>
</select></td>
<td><input name="Array[e][]" type="text" maxlength="20" size="20" value="" /></td>
<td><input name="Array[f][]" type="text" maxlength="20" size="20" value="" /></td>
<td><input name="Array[g][]" class="searchHeadline" type="text" maxlength="4" size="4" value="" /></td>
<td></td>
</tr>";

}

oder viel. ja ganz anders. ma sehn was mir einfällt ;)

Antwort 8 von son_quatsch

Das war leider keine Hilfe. Überhaupt nicht.

  1. Zeigt der MSIE z.B. Skriptfehler an (gelbes Hinweis-Icon unten links)?
  2. <input name="Array[ b ][]" beachten (ohne Leerzeichen)
  3. Beispiel wirklich übernommen und ausprobiert oder geändert und dann "ging es nicht"?


Antwort 9 von PapaKarsten

Zitat:
Zeigt der MSIE z.B. Skriptfehler an (gelbes Hinweis-Icon unten links)?

ja

zeile 7, zeichen 5

'nodename' ist kein Objekt oder NULL

Code = 0

Zitat:
<input name="Array[ b ][]" beachten (ohne Leerzeichen)


habe ich so



Zitat:
Beispiel wirklich übernommen und ausprobiert oder geändert und dann "ging es nicht"?


ja , ging nicht weil zeile 1 xml wollte er nicht. ansonsten alles so gelassen

Antwort 10 von son_quatsch

Sehr gut, damit kann ich nämlich auch was anfangen. Da habe ich wohl was altes kopiert. Außerdem: seit wann hat MSIE Probleme mit XML? Inwieweit äußert sich denn das "wollte er nicht"? Bitte nicht immer so schwammig :(

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de" dir="ltr"><head>
	<title>adding rows, the clean way</title>
	<script type="text/javascript">
		function checkLevel(nodes) {
			for (var i= 0; i< nodes.length; i++) {
				if (nodes.nodeName.toUpperCase()== 'INPUT') nodes.value= '';
				if (nodes.hasChildNodes()) checkLevel(nodes.childNodes);
			}
		}

		function addRow(strID) {
			// Zweite Tabellenzeile clonen (weil erste "Header" ist)
			var objNodes= document.getElementById(strID).getElementsByTagName('tr');
			var objRowNode= objNodes[1].cloneNode(true);

			// An das Ende des TBODYs einhängen
			document.getElementById(strID).appendChild(objRowNode);

			if (objRowNode.hasChildNodes()) checkLevel(objRowNode.childNodes);

			return false;
		}
	</script>
	<style type="text/css">
		th {
			font: 13px verdana;
			padding: 0px 0px 5px 0px;
			background-color: #D6D0DB;
		}
	</style>
</head><body>
	<table width="600" border="0" cellspacing="0" cellpadding="0">
		<tbody id="tbodyID"><tr>
			<th class="searchLabel">a</th>
			<th class="searchLabel">b</th>
			<th class="searchLabel">c</th>
			<th class="searchLabel">d</th>
			<th class="searchLabel">e</th>
			<th class="searchLabel">f</th>
			<th class="searchLabel">g</th>
			<th class="searchLabel">h</th>
		</tr><tr>
			<td><input name="Array[a][]" type="text" maxlength="11" size="11" value="" /></td>
			<td><input name="Array[bb][]" type="text" maxlength="50" size="40" value="" /></td>
			<td><select name="Array[c][]" size="1" class="searchField">
				<option value="Ja">Ja</option>
				<option value="Nein">Nein</option>
			</select></td>
			<td><select name="Array[d][]" size="1" class="searchField">
				<option value="Ja">Ja</option>
				<option value="Nein">Nein</option>
			</select></td>
			<td><input name="Array[e][]" type="text" maxlength="20" size="20" value="" /></td>
			<td><input name="Array[f][]" type="text" maxlength="20" size="20" value="" /></td>
			<td><input name="Array[g][]" class="searchHeadline"  type="text" maxlength="4" size="4" value="" /></td>
			<td></td>
		</tr></tbody>
	</table>

	<button onclick="return addRow('tbodyID');">Weitere eingeben</button>

</body></html>


Antwort 11 von PapaKarsten

Zitat:
mit xml zeile am anfang


Parse error: syntax error, unexpected T_STRING in datei1.php on line 1

Antwort 12 von son_quatsch

Aha - PHP ist also auch mit im Spiel. So schnell wird alles in einen Eimer geworfen :(

Speicher das ganze als datei.HTML bitte ab, nicht PHP! Wenn das funktioniert, reden wir weiter.

Antwort 13 von PapaKarsten

auch als html-Datei macht er das nicht.

Nun ma ne Frage an Dich, hast Du beim Testen was in die Testfelder geschrieben bevor Du auf den Button "Weitere..." geklickt hast oder nicht?

Antwort 14 von son_quatsch

Jetzt seh ich es endlich - Supportnet will unbedingt die eckigen Klammern interpretieren und streicht damit so manches raus - deswegen dachte ich vorhin auch, ich hab alten Code kopiert - was gar nicht gestimmt hat. Argh!

Habe jetzt den unten eingefügten Code in der Vorschau selbst rauskopiert und ausprobiert - endlich bleibt er erhalten! Weißt du - du musst im MSIE immer unten links das Icon betrachten. Es ist wichtig, ob Skriptfehler auftreten oder nicht. Bei deinen Versuchen müssten bisher immer welche aufgetreten sein - und folglich klappt dann so gut wie nichts mehr mit JavaScript.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de" dir="ltr"><head>
	<title>adding rows, the clean way</title>
	<script type="text/javascript">
		function checkLevel(nodes) {
			for (var i1= 0; i1< nodes.length; i1++) {
				if (nodes[i1].nodeName.toUpperCase()== 'INPUT') nodes[i1].value= '';
				if (nodes[i1].hasChildNodes()) checkLevel(nodes[i1].childNodes);
			}
		}

		function addRow(strID) {
			// Zweite Tabellenzeile clonen (weil erste "Header" ist)
			var objNodes= document.getElementById(strID).getElementsByTagName('tr');
			var objRowNode= objNodes[1].cloneNode(true);

			// An das Ende des TBODYs einhängen
			document.getElementById(strID).appendChild(objRowNode);

			if (objRowNode.hasChildNodes()) checkLevel(objRowNode.childNodes);

			return false;
		}
	</script>
	<style type="text/css">
		th {
			font: 13px verdana;
			padding: 0px 0px 5px 0px;
			background-color: #D6D0DB;
		}
	</style>
</head><body>
	<table width="600" border="0" cellspacing="0" cellpadding="0">
		<tbody id="tbodyID"><tr>
			<th class="searchLabel">a</th>
			<th class="searchLabel">b</th>
			<th class="searchLabel">c</th>
			<th class="searchLabel">d</th>
			<th class="searchLabel">e</th>
			<th class="searchLabel">f</th>
			<th class="searchLabel">g</th>
			<th class="searchLabel">h</th>
		</tr><tr>
			<td><input name="Array[aa][]" type="text" maxlength="11" size="11" value="" /></td>
			<td><input name="Array[bb][]" type="text" maxlength="50" size="40" value="" /></td>
			<td><select name="Array[cc][]" size="1" class="searchField">
				<option value="Ja">Ja</option>
				<option value="Nein">Nein</option>
			</select></td>
			<td><select name="Array[dd][]" size="1" class="searchField">
				<option value="Ja">Ja</option>
				<option value="Nein">Nein</option>
			</select></td>
			<td><input name="Array[ee][]" type="text" maxlength="20" size="20" value="" /></td>
			<td><input name="Array[ff][]" type="text" maxlength="20" size="20" value="" /></td>
			<td><input name="Array[gg][]" class="searchHeadline"  type="text" maxlength="4" size="4" value="" /></td>
			<td></td>
		</tr></tbody>
	</table>

	<button onclick="return addRow('tbodyID');">Weitere eingeben</button>

</body></html>


Antwort 15 von PapaKarsten

ja nun geht es danke

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen:

Ausfühliche Anleitungen und Artikel zu den Themen: