✔ forumular in einer tabelle dynamisch erweitern

nero_85 · 22. Juli 2005

ich brauch bitte ganz dringen eure hilfe!

ich mache gerade ein formular das beim klick auf den submitbutton eine art liste erstellt

diese liste besteht aus 5 spalten und sollte aus beliebig vielen zeilen bestehn!

da ist mein problem:

als ausgang soll imm formular eine zeile mit 5 input-elementen fungieren. jedes input-element liegt in einer tabellen-zelle. ungefähr so:

PHP:

<table>
    <tr> 
            <td align="center"><font size="1"><input type="text" name="name_ersteselement1" size="32"></font></td>
            <td align="center"><font size="1"><input type="text" name="name_zweiteselement1" size="33"></font></td>
            <td align="center"><font size="1"><input type="text" name="name_dritteselement1" size="31"></font></td>
            <td align="center"><font size="1"><input name="name_auswahlelement1" type="checkbox" value="1"></td>
			<td align="center"><font size="1"><input name="name_auswahlelement1" type="checkbox" value="0"></td>
    </tr>
</table>

nun soll man per klick auf einen button eine weitere zeile in die tabelle einfügen (ebenfalls mit den input-elementen. hinzugefügt werden. und zwar mit fortlaufender nummer der element-namen.

ich habs bereits in php versucht bin auf dem gebiet aber noch relativ neu und außerdem wäre das damit extrem umständlich! ich hab mir sagen lassen dass das mit javascript 1000mal leichter geht! aber wie

ich hab echt null ahnung von javascript! geht das

wenn ja wie

bitte helft mir es ist wirklich wichtig!!

thx
nero

FredNase · 22. Juli 2005

Hi,

ich hab so was auch mal mit Hilfe verschiedener Foren und viiiiieeel Lesen und Probieren gebastelt.

Hier ist mal ein Beispiel:

Code:

<html>
<head><title>Test</title></head>

<script type="text/javascript">

function clone_this()
{
  NewRow = document.getElementById('tab').lastChild.cloneNode(true);
  document.getElementById('tab').appendChild (NewRow);

  var i = document.getElementById('tab').childNodes.length - 1;

  for(j=0;j<document.getElementById('tab').lastChild.getElementsByTagName('input').length;j++)
  {
   var newname ='feld[' +i+ '][' +j+ ']';

   document.getElementById('tab').lastChild.getElementsByTagName('input')[j].setAttribute('name', newname) ;
   var name = document.getElementById('tab').lastChild.getElementsByTagName('input')[j].name;
   document.getElementById('tab').lastChild.getElementsByTagName('input')[j].value=name;

  }

}
</script>

<body>

<form method='post' name='first'>

   <table id='tab' border=1 style='width: 960px; height: 35px;'>
      <tr>
         <td width='160'><center><input type='text' name='feld[0][1]' value='feld[0][1]'></center></td>
         <td width='160'><center><input type='text' name='feld[0][2]' value='feld[0][2]'></center></td>
         <td width='160'><center><input type='text' name='feld[0][3]' value='feld[0][3]'></center></td>
         <td width='160'><center><input type='text' name='feld[0][4]' value='feld[0][4]'></center></td>
         <td width='160'><center><input type='text' name='feld[0][5]' value='feld[0][5]'></center></td>
      </tr>
   </table>
   <input type='button' value='neue Zeile' onClick='clone_this()'>
</form>

</body>
</html>

Hoffe es hilft dir weiter...

Grüße

nero_85 · 22. Juli 2005

danke für die prompte antwort! ich seh mal wie weit ich damit komm!

thx

nero_85 · 22. Juli 2005

also erstmal danke! das ist wirklich das was ich brauche!

nur brauche ich das ganze ein bisschen anders! ich hab nun versucht das ganze zu modifiziern, aber leider ist das nicht so leicht ohne javascript-kenntnisse!

ich hab das jetzt mal so gemacht:

PHP:

<html>
<head><title>Test</title></head>

<script type="text/javascript">

function clone_this()
{
  NewRow = document.getElementById('tab').lastChild.cloneNode(true);
  document.getElementById('tab').appendChild (NewRow);

  //var i = document.getElementById('tab').childNodes.length - 1;

  for(j=0;j<document.getElementById('tab').lastChild.getElementsByTagName('input').length;j++)
  {
	var newname1 ='dim_c_measures' +j;
	var newname2 ='dim_tolerances' +j;
	var newname3 ='dim_f_result' +j;
	var newname4 ='yesno' +j;

   document.getElementById('tab').lastChild.getElementsByTagName('input')[j].setAttribute('name', newname+j) ;
   var name = document.getElementById('tab').lastChild.getElementsByTagName('input')[j].name;
   document.getElementById('tab').lastChild.getElementsByTagName('input')[j].value=name;

  }

}
</script>

<body>

<form method='post' name='first'>

   <table id='tab' border=1 style='width: 960px; height: 35px;'>
      <tr>
         <td width='160'><center><input type='text' name='feld[0][1]' value='feld[0][1]'></center></td>
         <td width='160'><center><input type='text' name='feld[0][2]' value='feld[0][2]'></center></td>
         <td width='160'><center><input type='text' name='feld[0][3]' value='feld[0][3]'></center></td>
         <td width='160'><center><input type='text' name='feld[0][4]' value='feld[0][4]'></center></td>
         <td width='160'><center><input type='text' name='feld[0][5]' value='feld[0][5]'></center></td>
      </tr>
   </table>
   <input type='button' value='neue Zeile' onClick='clone_this()'>
</form>

</body>
</html>

wie ich erwartet habe ist das ganze aber leider nicht richtig!

bitte helft mir nochmal!

nero

FredNase · 22. Juli 2005

Also,
ich hab´s jetzt mal so interpretiert, dass du die vier verschiedenen Namen für vier Felder deiner Zeile verwenden willst und je Zeile dann halt mit angehängter Zeilennummer.

...richtig?

Wenn ja, kannst du es mal so probieren:

Code:

<html>
<head><title>Test</title></head>

<script type="text/javascript">

function clone_this()
{
  NewRow = document.getElementById('tab').lastChild.cloneNode(true);
  document.getElementById('tab').appendChild (NewRow);

  var i = document.getElementById('tab').childNodes.length;

  var newname = new Array('zeile'+i+' ', 'dim_c_measures'+i+' ', 'dim_tolerances'+i+' ', 'dim_f_result'+i+' ', 'yesno'+i+' ');

  for(j=0;j<document.getElementById('tab').lastChild.getElementsByTagName('input').length;j++)
  {
   document.getElementById('tab').lastChild.getElementsByTagName('input')[j].setAttribute('name', newname[j]) ;
   var name = document.getElementById('tab').lastChild.getElementsByTagName('input')[j].name;
   document.getElementById('tab').lastChild.getElementsByTagName('input')[j].value=newname[j];

  }

}
</script>

<body>

<form method='post' name='first'>

   <table id='tab' border=1 style='width: 960px; height: 35px;'>
      <tr>
         <td width='160'><center><input type='text' name='zeile1' value='zeile1'></center></td>
         <td width='160'><center><input type='text' name='dim_c_measures1' value='dim_c_measures1'></center></td>
         <td width='160'><center><input type='text' name='dim_tolerances1' value='dim_tolerances1'></center></td>
         <td width='160'><center><input type='text' name='dim_f_result1' value='dim_f_result1'></center></td>
         <td width='160'><center><input type='text' name='yesno1' value='yesno1'></center></td>
      </tr>
   </table>
   <input type='button' value='neue Zeile' onClick='clone_this()'>
</form>

</body>
</html>

...wenn nein, musst du mal genau beschreiben was du willst und nicht einfach nur Code posten

Gruß

nero_85 · 23. Juli 2005

danke, hat mir toll geholfen! war perfekt! gg!

nero_85 · 25. Juli 2005

Hi ich bins nochmal!

Also ich hab mich gestern nochmal auf meine beiden A****backen gesetzt und hab das ganze Formular nochmal geschrieben da ich mit dem Herumexperimentieren irgendwie einen gewaltigen Fehler eingebaut hab und neumachen schneller ging als Fehler suchen!

Auf jeden Fall hatte ich kein Internet und hab das ganze selbst nachgebaut und zwar so:

PHP:

<html>
<head>
<title>Unbenanntes Dokument</title>
<script language="JavaScript1.2">

function clone_this_dim(){

	NewRow = document.getElementById('tabdim').lastChild.cloneNode(true);
	document.getElementById('tabdim').appendChild(NewRow);
	
	var i = document.getElementById('tabdim').childNodes.length;
	
	for(j=0;j<document.getElementById('tabdim').lastChild.getElementsByTagName('input').length;j++){
		
		if(j == 0){
			var spalte = 'c_measures';
		}
		
		else if(j == 1){
			var spalte = 'tolerance';
		}
		
		else if(j == 2){
			var spalte = 'f_result';
		}
		
		else if(j == 3){
			var spalte = 'yesno';
		}
		
		var zeile = 'dim_';
		var newname = zeile + spalte + i;
		
		document.getElementById('tabdim').lastChild.getElementsByTagName('input')[j].setAttribute('name', newname);
		//var name = document.getElementById('tabdim').lastChild.getElementsByTagName('input')[j].name;
		document.getElementById('tabdim').lastChild.getElementsByTagName('input')[j].value='';
		document.getElementById('dim_zeilen').setAttribute('value', i);
		
	}
}

</script>
</head>

<body>
<form method="post" name="test">
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="tabdim">
					<tr>
           				<td width="219" align="center"><font size="1"><input type="text" name="dim_c_measures1" size="32"></font></td>
            			<td width="221" align="center"><font size="1"><input type="text" name="dim_tolerance1" size="33"></font></td>
            			<td width="216" align="center"><font size="1"><input type="text" name="dim_f_result1" size="31"></font></td>
            			<td width="38" align="center"><font size="1"><input name="dim_yesno1" type="checkbox" value="1"></font></td>
            			<td width="36" align="center"><font size="1"><input name="dim_yesno1" type="checkbox" value="0"></font></td>
					</tr>
					<tr> 
            			<td><font size="1">&nbsp;</font></td>
           			 	<td><font size="1">&nbsp;</font></td>
            			<td><font size="1">&nbsp;</font></td>
            			<td><font size="1">&nbsp;</font></td>
            			<td><font size="1">&nbsp;</font></td>
          			</tr>
				</table>
				<input type="hidden" name="dim_zeilen" id="dim_zeilen" value="1"><input type="button" value=" + " onClick="clone_this_dim()">
</form>
</body>
</html>

(nur der auszug der hier gefragt ist)

Nun hab ich mich aber gefragt wie man die letzte Zeile jeweils wieder löschen kann?

pls help

FredNase · 25. Juli 2005

Also, nimm mal diese Funktion...

Code:

function delete_row ()
{
   var Knoten = document.getElementById ('tabdim').lastChild;   //Letzte Zeile der Tabelle ermitteln
   document.getElementById ('tabdim').removeChild(Knoten);   //Letzte Zeile der Tabelle entfernen
}

füge noch einen zusätzlichen Button ein...

Code:

<input type="button" value=" - " onClick="delete_row()">

und es sollte funktionieren.

Grüße

nero_85 · 25. Juli 2005

danke perfekt!

schon wieder

thx

greetz
nero

euromark · 12. August 2007

Klasse "Vorarbeit"...
hab deine Ansätze übernehmen können.. für das eine Formular

ABER für das 2. Formular ersetzt ein Dropdownfeld das erste inputfeld..
und genau das zerpflückt dann meine POST-Dateien...

a:16 b: c:yy1 d:xxx e:1
a:11 b: c:yy2 d:1 e:
a:12 b: c:yy3 d:0 e:

-> man erkennt dass er irgendwie dann teilweise nach rechts versetzt..
die e-Values (1 und 0 hinten) wandern ab Zeile 2 zu den d-Values
und damit werden die eigentlcih d-Values dann gelöscht..

✔ forumular in einer tabelle dynamisch erweitern

nero_85

Erfahrenes Mitglied

FredNase

Erfahrenes Mitglied

nero_85

Erfahrenes Mitglied

nero_85

Erfahrenes Mitglied

FredNase

Erfahrenes Mitglied

nero_85

Erfahrenes Mitglied

nero_85

Erfahrenes Mitglied

FredNase

Erfahrenes Mitglied

nero_85

Erfahrenes Mitglied

euromark

Grünschnabel

Neue Beiträge