[JavaScript] Reihenfolge beim ausführen von document.write

[Alecco]

Hi,

ich wundere mich grade über folgendes: Ich erzeuge mit einer Schleife und einem Array Eingabefelder. Das klappt auch alles. Jetzt möchte ich das gerne in eine Tabelle schreiben. Komisch ist, dass die Tabelle nicht erzeugt wird.

Dazu folgender Ausschnitt aus meinem Code:

...
document.write("<table id='1' width='' border='1' cellspacing='1'>");    
    for(i=0; i<feingabe.length; i++){
        document.write("<tr>");
        document.write("<td><strong><font class='sd'>"+ feingabe[i] +"</font></strong></td>");
        document.write("<td><input type='text' name="+ feingabe[i] +"size='35' style='background-color:#FFFCF2; border:1px solid; border-color:#AAAAAA; font-size:8pt; width:250px' value=''></td>");
        document.write("</tr>");
    }    
    document.write("</table>");

Jetzt passiert folgendes:
Anstatt das er etwas macht wie...

<table...>
...
</table>

macht er:

<table...></table>
...

Woher kommt das?

 

[knalli]

Laut Schleife sollte das zwar gehen.. aber du solltest, ganz im Ernst, von document.write Abstand nehmen. Abgesehen vom Laufzeitverhalten ist das unschön.

Sagen wir, du willst in einem DIV (sagen wir, <div id="meindiv">..) eine Tabelle wie oben einfügen, und willst dafür ernsthaft kein Hilfsmittel wie jQuery nutzen:

var target = document.getElementById('meindiv'); // unchecked if exists

var table = document.createElement('table');
table.id = 1;
table.border = 1;
table.cellspacing = 1;

for (var i = 0; i < feingabe.length; i++) {
  var text = feingabe[i];
  var tr = document.createElement('tr');
  var td1 = document.createElement('td');
  var td2 = document.createElement('td');
  var input = document.createElement('input');

  td1.innerHTML = text; // oder td1.appendChild(document.createTextNode(text));
  
  input.type = 'text';
  input.name = text;
  input.size = 35;
  input.style.backgroundColor = '#ffcf2'; // usw.
  td2.appendChild(input);
 

  tr.appendChild(td1);
  tr.appendChild(td2);
  table.appendChild(tr);
}

target.appendChild(table);

Das ist echte DOM-Manipulation auf den Baum und hat auf jeden Fall den gewünschten Effekt. Da da allerdings viel Boilercode ist, würde ich ein Framework wie jQuery empfehlen. Einfach mal angucken, jquery.com. Angenehm, leicht, kurz, klein und schnell.

 

[Alecco]

Ok ich habe alles umgeändert und es funktioniert.

Aber: Wie kann ich jetzt z.B. bei einem erzeugtem "radio" überprüfen, ob dieser angeklickt worden ist?

 

[_linx_]

http://de.selfhtml.org/javascript/objekte/elements.htm#checked

 

[knalli]

http://de.selfhtml.org/javascript/objekte/elements.htm#checked

Hinweis: Musst ggf. nur die Reihenfolge im Eventstack beachten, also nicht wundern, wenn this.value dann ein unerwartetes Ergebnis liefert.