Per Klick neuen Button hinzufügen (In einer Tabelle)

Reiser · 9 September 2010

Hallo,

ich hänge leider momentan in meinem Projekt, da ich in JS und HTML leider noch nicht so gut bin wie ihr. :/
Also nun bitte ich um eure Hilfe.

Per Klick soll ein neues Formularfeld incl. Beschriftung hinzugefügt werden. Ist ja nicht so schwierig, bei mir muss aber eine gesamte neue Spalte mit zwei Zellen hinzugefügt werden (halt auch wegen meinem bereits vorhandenem Design). Der Inhalt von den Zellen darf nicht verändert werden!
Ich habe mir gedacht ich hänge einfach eine div-Box ans Ende der letzten Spalte (nach </tr>). Leider klappt das aber nicht so, wies soll. Wenn ich auf den Button klicke, so wird das neue Formularfeld oberhalb der Tabelle hinzugefügt. :/

Hier der Code:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" dir="ltr"> 
<head> 
<title>Test Formular</title> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<link href="../styles/gsv_grey/admin/css/contend.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="../js/ajax-prototype-1.6.0.2.js"></script> 
<script type="text/javascript"> 
var feld = 1;
function neu() {
  var old_feld = feld;
  feld++;

  document.getElementById('dynamic_input' + old_feld).innerHTML += '\r\n\r\n<tr class="sform_r2" valign="middle" id="sform_r_tr_name5">\r\n <th valign="middle" class="sform_input">\r\n  <label>Input12</label>\r\n </th>\r\n <td class="sform_input">\r\n  <div class="sform_r2_inp_tx">\r\n   <input type="text" name="name5" class="sinput" id="name5" value="Value12" tabindex="19" \>\r\n  </div>\r\n </td>\r\n</tr>\r\n<div class="sform" id="dynamic_input' + feld + '"></div>';

}
</script></head> 
<body> 
<center> 
<h1 class="main_h1">Design-Test Formular</h1> 
<hr> 
<br> 
<div class="sform" style="max-width: 600;"> 
<form name="form1" id="form1" method="POST" action="[MessageBox|s:"Success write!";e:"Error with writing!";a:"Test";b:"Test1";*:"Ka aaahhnung"]" enctype="multipart/form-data"> 
 
<table> 
  <caption>Next Table</caption> 
 
<tr class="sform_r1" valign="middle" id="sform_r_tr_name4"> 
 <th valign="middle" class="sform_input"> 
  <label>Input11</label> 
 </th> 
 <td class="sform_input"> 
  <div class="sform_r1_inp_tx"> 
   <input type="text" name="name4" class="sinput" id="name4" value="Value11" tabindex="18" \> 
  </div> 
 </td> 
</tr> 

<div class="sform" id="dynamic_input1"></div>
 
<tr class="sform_r2" valign="middle" id="sform_r_tr_name5"> 
 <th valign="middle" class="sform_input"> 
  <label>Input12</label> 
 </th> 
 <td class="sform_input"> 
  <div class="sform_r2_inp_tx"> 
   <input type="text" name="name5" class="sinput" id="name5" value="Value12" tabindex="19" \> 
  </div> 
 </td> 
</tr>
<div class="sform" id="dynamic_input2"></div>
 
<tr class="sform_r1" valign="middle" id="sform_r_tr_name4"> 
 <th valign="middle" class="sform_input"> 
  <label>Input11</label> 
 </th> 
 <td class="sform_input"> 
  <div class="sform_r1_inp_tx"> 
   <input type="text" name="name4" class="sinput" id="name4" value="Value11" tabindex="18" \> 
  </div> 
 </td> 
</tr> 
<div class="sform" id="dynamic_input3"></div>

</table> 
 
</form> 
</div> 
</center> 
<button type='button' onClick="neu();">Neues Formularfeld</button>
</body> 
</html>

Hier ein Screenshot:

Danke schon mal im Voraus!

threadi · 9 September 2010

Eigentlich brauchst Du für soetwas keine Tabelle. Denn erst die Tabelle bereitet dir das Problem. Du kannst nicht einfach nach einem </tr> irgendwas anderes wie ein <div> einbinden. Sowas ist nicht valide und führt logischerweise zu Fehlern.

Du solltest dich wirklich mehr mit JS auseinandersetzen. Einige Tipps: für das Einfügen von Elementen gibt es zahlreiche fertige JS-Funktionen die man nutzen kann. Mit createElement() wird z.B. ein neuer DOM-Knoten, also ein HTML-Element, erzeugt. Beispiel:

Code:

var neuesdiv = document.createElement();

Um es dann an der passenden Stelle einzuhängen, musst Du diese Referenzieren und mit appendChild() das neue Element einhängen:

Code:

var umgebendesdiv = document.getElementById('eindeutigeID');
umgebendesdiv.appendChild(neuesdiv);

Wenn Du dich so auf der DOM-Ebene bewegst, wirst Du weniger Probleme haben.

Per Klick neuen Button hinzufügen (In einer Tabelle)

Reiser

Neues Mitglied

threadi

Moderator

Neueste Beiträge