html dynamisch einfügen

[Alex]

hallo ich habe in einer meiner seiten ein Problem html dynamisch einzufügen.

Ich versuche wenn leute angeben wie viele Personen er in der Familie hat zusätzliche Tabellen erscheinen zu lassen damit deren Daten eingetragen werden können.

Bisher habe ich es mit einer Tabelle angeben lassen wie viele es denn sind.

<tr>
  <td>Zusätzlich Personen:</td>
  <td>
  <select name="personen_anzahl" id="personen_anzahl" onchange="zusaetzliche_personen()">

<option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  </select>
  </td>
</tr>

Mit der function lasse ich tabellen erstellen

<script type="text/javascript">
  function zusaetzliche_personen(){
  var personen_anzahl=document.getElementById('personen_anzahl').value;
  if(personen_anzahl == "1"){
  document.write("funktioniert");
  }
  }
  </script>

und im body bereicht da wo ich es eingefügt haben möchte steht

<script type="text/javascript">
  zusaetzliche_personen()
  </script>

nur leider schreibt er nun nicht in das dukument sondern auf eine neue seite.

[(der richtige) Alex]

Hallo,

Mit der function lasse ich tabellen erstellen

<script type="text/javascript">
  function zusaetzliche_personen(){
  var personen_anzahl=document.getElementById('personen_anzahl').value;
  if(personen_anzahl == "1"){
  document.write("funktioniert");
  }
  }
  </script>

und im body bereicht da wo ich es eingefügt haben möchte steht

<script type="text/javascript">
  zusaetzliche_personen()
  </script>

nur leider schreibt er nun nicht in das dukument sondern auf eine neue seite.

Gibt es Fehlermeldungen? z.B. in der JavaScript Konsole?

Ich stand letztens vor demselben Problem. Probehalber (so wie du das jetzt machst) hat es noch geklappt. Aber als es dann wirklich um das Einfügen von weiteren Tabellenzeilen ging, gab es Probleme. Im Firefox ging es glaube ich immer, aber der IE hat rumgezickt.

Ich habe es dann schlussendlich so gemacht, dass ich mit ganz unten im Dokument eine Dummy-Tabelle angelegt habe, die den zusätzlichen Zeilen als Vorlage dienen soll.

Die gehe ich dann in der JavaScript-Funktion Zeile für Zeile und Zelle für Zelle durch und baue sie in die richtige Tabelle im Formular ein (document.createElemen, richtigeTabelle.insertRow, neueZeile.appendChild etc.)

Das klappt Browserübergreifend :)

Gruß
Alex

[Gunnar Bittersmann]

@@Alex:

nuqneH

nur leider schreibt er nun nicht in das dukument sondern auf eine neue seite.

Ja, das ist bei document.write() der Fall.

Du möchtest DOM-Methoden ([ref:self812;javascript/objekte/document.htm#create_element@title=createElement()], [ref:self812;javascript/objekte/node.htm#append_child@title=appendChild()])oder [ref:self812;javascript/objekte/all.htm#inner_html@title=innerHTML] (aber nicht document.all) verwenden, um neue Elemente zu erzeugen.

Qapla'

[Alex]

Danke Qapla'

Ich habe es nun ne Zeit mit createElement() und appendChild() versucht.

aber ich verstehe einfach nicht wie ich dann eine ganze tabelle so zu sagen erscheinen lassen kann (2spalten4zeilen) und dann auch noch so das ich auf die werte am besten per id zugreifen kann.

das nächste problem das ich schon kommen sehe ist wenn dann jemand auf der auswahl immer mal wieder was andres wählt schreibt der immer wieder das gleiche aufs neue drunter.

hat jemand ein beispiel für eine tabelle?

[(der richtige) Alex]

Hallo

Ich habe es nun ne Zeit mit createElement() und appendChild() versucht.

aber ich verstehe einfach nicht wie ich dann eine ganze tabelle so zu sagen erscheinen lassen kann (2spalten4zeilen) und dann auch noch so das ich auf die werte am besten per id zugreifen kann.

Wie genau hast du es probiert? Was passiert? Was wird als Fehler ausgegeben? Was sagt z.B. Firebug, wenn du dort den Code ausführen willst?

Mit createElement baust du erstmal ein TR. Dort willst du dann zwei TD mit createElement unterbringen. Das gleiche wiederholst du nochmal für die Zeilen 2 bis 4.

Danach fügst du diese Zeilen mit insertRow(-1) zu der ursprünglichen Tabelle hinzu.

Also, wo genau ist das Problem?

Wie gesagt: Ich mache es mit einer Dummy-Tabelle und hole mir die Inhalte der Zellen aus dieser Dummy-Tabelle und arbeite dort mit innerHTML. Wenn man es ganz sauber macht würde man hier auch noch mit createElement die Formularbestandteile in die Tabellenstruktur hineinoperieren.

Dazu hatte ich keine Lust und mache es daher per innerHTML. Die Tabellenstruktur musst du aber meiner Meinung nach über createElement machen, weil der IE das sonst (bei Tabellen) nicht akzeptiert.

das nächste problem das ich schon kommen sehe ist wenn dann jemand auf der auswahl immer mal wieder was andres wählt schreibt der immer wieder das gleiche aufs neue drunter.

hat jemand ein beispiel für eine tabelle?

Hast du ein Beispiel, in dem du es erfolglos probierst?

Gruß
Alex

[Alex]

Ich habe es mit

function zusaetzliche_personen(){
  var personen_anzahl=document.getElementById('personen_anzahl').value;

var TR = document.createElement("tr");  
var TD = document.createElement("td");  
var person1 = document.createTextNode("Zusätzliche Person 1:");  
var person1anrede = document.createTextNode("Anrede:");  
var schreibeinextra = document.getElementById("extra");  

if(personen_anzahl == "1"){

	  	schreibeinextra.appendChild(TR);  
		TR.appendChild(person1)[0];  
		schreibeinextra.appendChild(TD);  
		schreibeinextra.appendChild(TR);  
		TR.appendChild(person1anrede)[1];  
		schreibeinextra.appendChild(TD);}  

}  }

versucht aber dann schreibt er die sachen hintereinander.

Ich habe die beschreibungen durchgelesen aber ich raff es einfach nicht -.-
warum gibt es nicht ein gutes video dazu.

[(der richtige) Alex]

Hi,

ich glaube langsam wäre mal ein Online-Beispiel ganz gut, dann kann man es besser nachvollziehen, ohne es selber bauen zu müssen.

function zusaetzliche_personen(){
  var personen_anzahl=document.getElementById('personen_anzahl').value;

var TR = document.createElement("tr");
var TD = document.createElement("td");
var person1 = document.createTextNode("Zusätzliche Person 1:");
var person1anrede = document.createTextNode("Anrede:");
var schreibeinextra = document.getElementById("extra");

if(personen_anzahl == "1"){

    	schreibeinextra.appendChild(TR);  
  	TR.appendChild(person1)[0];  
  	schreibeinextra.appendChild(TD);  
  	schreibeinextra.appendChild(TR);  
  	TR.appendChild(person1anrede)[1];  
  	schreibeinextra.appendChild(TD);}  

}  }

versucht aber dann schreibt er die sachen hintereinander.

Was genau bedeutet das?

Ich habe es (auszugsweise) so gemacht:

  
                                newTR = document.createElement('tr');  
                                newTD1 = document.createElement('td');  
                                newTD2 = document.createElement('td');  
                                newTD3 = document.createElement('td');  
  
  
                                newTR = originalTable.insertRow(-1);  
                                newTR.appendChild(newTD1);  
                                newTR.appendChild(newTD2);  
                                newTR.appendChild(newTD3);  
  

Ich habe die beschreibungen durchgelesen aber ich raff es einfach nicht

Probieren geht über studieren ;)

Wie schonmal angesprochen: Nutze Firebug und teste da das JavaScript - das geht 100 mal schneller, als jedes mal eine Datei zu speichern...

Nochwas aus meinem Code: Ich habe nutze in beiden Tabellen <tbody>. Ich glaube ich mache das, weil der IE ohne das keinen Spaß daran hatte.

warum gibt es nicht ein gutes video dazu.

Man braucht nicht für alles ein Video...

[JürgenB]

Hallo Alex,

ich glaube, dir ist die Hierarchie einer Tabelle noch nicht ganz klar:

"IrgendeinElement (z.B. ein DIV)"
  table
    tbody
      tr
        td
        td
        ...
      tr
        td
        ...
      ...

Beim Einhängen mit appendChild musst du:
  td -> tr
  tr -> tbody
  tbody -> table
  table -> "IrgendeinElement (z.B. ein DIV)"

als Beispiel, wie ich das mal vor einiger Zeit gemacht habe, schau dir die Funktion "make_table" in meinem Ritzelrechner an.

Gruß, Jürgen