online 1
gast (50)
Mitglied werden / Anmelden

Gruppen

Top Gruppen
Windows 7
Windows Vista
Windows XP
Textverarbeitung
Excel
DSL
Internet Browser
E-Mail/Outlook
Betriebsysteme
Windows classik
Linux
BS-Sonstige
Software
Datenbanken
Bildbearbeitung
Audio/mp3/Video
Security/Viren
SW-Sonstige
Hardware
Mainboard/CPU
Grafikkarten
Peripherie
Laptop/Notebook
HW-Sonstiges
Netzwerk
Telefon,ISDN,Modem
W-Lan
NW-Sonstiges
Programmierung
PHP,ASP,Perl...
Java,C++...
Webseiten/HTML
Sonstiges
PC-Sonstiges
Plauderecke
SN Intern
Test

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

Skripte(PHP,ASP,Perl...)Skripte(PHP,ASP,Perl...)

Fragevon PapaKarsten vom 07.05.2020, 08:27 Options

per Button klick neue tabellenzeile JS

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 schreiben

Antwort 1 von son_quatsch vom 07.05.2020, 11:43 Options

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[i].nodeName.toUpperCase()== 'INPUT') objChilds[i].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 vom 08.05.2020, 07:56 Options

<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[b][]" 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 vom 08.05.2020, 09:58 Options

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[i].nodeName.toUpperCase()== 'INPUT') nodes[i].value= '';
				if (nodes[i].hasChildNodes()) checkLevel(nodes[i].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[b]" 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 vom 08.05.2020, 10:00 Options

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

Antwort 5 von PapaKarsten vom 08.05.2020, 10:09 Options

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 vom 08.05.2020, 10:22 Options

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 vom 08.05.2020, 10:39 Options

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 vom 08.05.2020, 10:50 Options

Das war leider keine Hilfe. Überhaupt nicht.

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

Antwort 9 von PapaKarsten vom 08.05.2020, 10:56 Options

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 vom 08.05.2020, 11:57 Options

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[i].nodeName.toUpperCase()== 'INPUT') nodes[i].value= '';
				if (nodes[i].hasChildNodes()) checkLevel(nodes[i].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 vom 08.05.2020, 12:03 Options

Zitat:
mit xml zeile am anfang


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

Antwort 12 von son_quatsch vom 08.05.2020, 12:10 Options

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 vom 08.05.2020, 12:20 Options

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 vom 08.05.2020, 13:11 Options

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 vom 08.05.2020, 13:18 Options

ja nun geht es danke

Ähnliche Themen

Find Button
Beci  27.03.2007 - 117 Hits - 10 Antworten

weaversslave
phpcoder  30.08.2007 - 31 Hits - 4 Antworten

SQL-Abfrage per Button in Access
holger771  09.03.2008 - 34 Hits - 1 Antwort

Excel
Sandra.Mueller  22.05.2008 - 5 Hits - 3 Antworten

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

 Tipp einschicken
 News einschicken
Version: supportware 1.9.150 / 10.06.2022, Startzeit:Sun Jan 25 18:15:21 2026