Internet Explorer weigert sich eine Tabelle zu erzeugen

[Fabian St.]

Hi!

Die vorliegende JavaScript-Datei ist Teil einer Demo-Applikation, die ich für eine Firma entwickelt habe. Leider kann ich diese nicht online stellen, da ihr die notwendige Hardware und Serversoftware nicht habt.

Im Firefox und Opera macht die Funktion genau das, was sie soll, nämlich eine Tabelle mittels DOM-Methoden zu erstellen und diese anzuzeigen. Die JavaScript-Konsole des Firefox und von Opera melden keine Fehler; das gleiche gilt für den IE, jedoch wird die neu erzeugte Tabelle nicht dem Element mit der ID 'NetworkVariables' angehängt. Leider weiß ich auch nicht, wie ich mit dem Debugging für den IE anfangen sollte.

Reichen euch diese spärlichen Informationen, um eine Vermutung abzugeben?

Grüße,
Fabian St.

[Gunnar Bittersmann]

Hello out there!

Reichen euch diese spärlichen Informationen, um eine Vermutung abzugeben?

Ja, denke schon.

tr ist in HTML _kein_ Kind von table.

Die entsprechenden Zeilen aus der DTD:

<!ELEMENT TABLE - -  
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

<!ELEMENT TBODY    O O (TR)+           -- table body -->

See ya up the road,
Gunnar

[molily]

Hallo,

var table = document.createElement('table');
var th1 = document.createElement('th');
table.appendChild(th1)

Das ist schon einmal Unsinn. An einem table-Element kann kein th-Element hängen.

var tr = document.createElement('tr');
table.appendChild(tr);
var td1 = document.createElement('td');
tr.appendChild(td1);

Schon besser. Aber der IE will zusätzlich noch ein ausdrückliches tbody-Element (welches in HTML immer stillschweigend vorhanden ist). Wenn du so vorgehst, sollte keiner verletzt werden:

1. table-Element erzeugen
2. thead- oder tbody-Element erzeugen und anhängen
3. tr-Element erzeugen und anhängen
4. th- bzw. td-Elemente erzeugen und anhängen
5. Gegebenenfalls Textknoten und weitere Elemente erzeugen und anhängen

Erzeugen und Anhängen müssen natürlich nicht streng aufeinanderfolgen, du kannst natürlich auch von hinten anfangen, es geht nur darum, dass du letztlich einen solchen Knotenbaum hast: table → thead/tbody → tr → th/td → weitere Knoten.

Mathias

[molily]

$('Variables') ? Element.remove('Variables') : '';

Warum diese seltsame Schreibweise mit dem Fallunterscheidungs-Operator? Was soll denn das Expression-Statement ''; bewirken? ;) Hier reicht wohl eine einfache if-Anweisung aus.

$('NetworkVariables').removeAttribute('class');

Das wird der IE möglicherweise auch nicht können. Er bräuchte glaube ich removeAttribute("className"), was natürlich unerwünscht wäre. Also reicht wohl .className = "".

Mathias

[Joachim]

Hi,

Im Firefox und Opera macht die Funktion genau das, was sie soll, nämlich eine Tabelle mittels DOM-Methoden zu erstellen und diese anzuzeigen.

Ins Blaue: Du hast vergessen, dass Du im IE bei dynamischen DOM-Tabellen zwingend auch das tbody element erzeugen und einfügen musst?

Gruesse, Joachim

[Gunnar Bittersmann]

Hello out there!

Ins Blaue: Du hast vergessen, dass Du im IE bei dynamischen DOM-Tabellen zwingend auch das tbody element erzeugen und einfügen musst?

Ins Blaue: Du hast nicht vorher gelesen, was molily und ich schon gesagt hatten?

See ya up the road,
Gunnar

[Joachim]

Hi,

Ins Blaue: Du hast nicht vorher gelesen, was molily und ich schon gesagt hatten?

leider erst hinterher *schäm*

Gruesse, Joachim

[Fabian St.]

Hi!

Danke an Mathias und Gunnar! Dank eurer Hilfe funktioniert es nun.

Nun habe ich noch ein weiteres Problem, was aber in die gleiche Richtung geht:

Diese Datei beinhaltet zwei Funktionen bzw. eine ganze und die zweite zur Hälfe. addCreateNvItems() soll dabei mehrere Texteingabefelder, Radio-Buttons und eine Drop-Downliste erzeugen. CreateNv() ist dann dabei die Funktion die aufgerufen wird, wenn die obigen Felder ausgefüllt wurden und ein Button geklickt wurde. Als Parameter wird ihr die Anzahl der vorhandenen "Formulare" (d.h. die Anzahl der divs mit der Klasse createNvItem) übergeben und soll dabei die jeweiligen Werte der Texteingabefelder, etc. in lokale Variablen zwischenspeichern. Im Mozilla und Opera funktioniert dies ganz gut, nur der Internet Explorer stolpert über folgende Zeilen:

var select = document.getElementsByName('nvType' + i)[0];
alert(typeof select); // gibt undefined aus, anstatt object
var nvTypes = select.getElementsByTagName('option'); // "'undefined' ist null oder kein Objekt"

Was habe ich dieses mal falsch gemacht? Vielen Dank schon mal für eure Mühen!

Grüße,
Fabian St.

P.s. Wo steht denn z.B. dass der Internet Explorer für die DOM-Sachen noch ein tbody und ein thead-Element braucht? Ich konnte dies nirgends nachlesen ...

[Ashura]

Hallo Fabian.

P.s. Wo steht denn z.B. dass der Internet Explorer für die DOM-Sachen noch ein tbody und ein thead-Element braucht? Ich konnte dies nirgends nachlesen ...

Die MSDN sollte hier weiterhelfen.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Fabian St.]

Hi!

Jetzt bin ich selber ein bisschen weitergekommen.

var select = document.getElementsByName('nvType' + i)[0];

Ersetze ich obige Zeile durch folgende, so funktionierts auch im IE:

var select = document.getElementsByTagName('select')[i];

Meine Frage ist nun aber: Warum?

Grüße,
Fabian St.

[molily]

Hallo,

Was habe ich dieses mal falsch gemacht?

Nichts. Das ist wieder so eine Eigenart des IEs. Wenn du auf diese Weise das select-Element erzeugst und das name-Attribut setzt, dann findet getElementsByName das Element nicht.

Ich würde einfach noch ein id-Attribut setzen. 'nvType' + i scheint ja schon dokumentweit eindeutig zu sein. getElementById (und kurioserweise getElementsByName) finden das Element dann problemlos...

Mathias

[MudGuard]

Hi,

P.s. Wo steht denn z.B. dass der Internet Explorer für die DOM-Sachen noch ein tbody und ein thead-Element braucht? Ich konnte dies nirgends nachlesen

zigfach im Archiv zu diesem Forum ...

cu,
Andreas