dynamisch generierte tabelle
Julian
- javascript
Hallo allesamt,
Ich möchte per Javascript-Funktion in eine bestehende div dynamisch eine Tabelle einfügen. Dafür habe ich folgendes Script geschrieben:
function los()
{
var tableElement = document.createElement("table"); //table element kreieren
var tableAttribut = document.createAttribute("id"); //attribut "id" kreieren
tableAttribut.nodeValue = "popup_table"; //id-attribut zuweisen
tableElement.setAttributeNode(tableAttribut);//attribut eintragen
document.getElementById("popup_div").appendChild(tableElement); //table-element in div eintragen
var trElement = document.createElement("tr"); //tr-element für Überschrift kreieren
var trAttribut = document.createAttribute("id"); //attribut "id" kreieren
trAttribut.nodeValue = "tr_titel"; //id-attribut zuweisen
trElement.setAttributeNode(trAttribut);//attribut eintragen
document.getElementById("popup_table").appendChild(trElement); //tr-element in table eintragen
var tdElement = document.createElement("td"); //
var tdAttribut = document.createAttribute("id"); //attribut "id" kreiern
tdAttribut.nodeValue = "popup_titel"; //id-attribut zuweisen
tdElement.setAttributeNode(tdAttribut);//attribut eintragen
document.getElementById("tr_titel").appendChild(tdElement); //td-element in tr eintragen
jetzt dachte ich mir, dass ich mit folgendem Code-Schnipsel
var testext = document.createTextNode("tabellentext, dynamisch");
document.getElementById("popup_titel").appendChild(testext);
einen Text in die td eintragen kann. Das funktioniert aber nicht, was mache ich falsch?
mfg Julian
Hallo Julian.
Ich möchte per Javascript-Funktion in eine bestehende div dynamisch eine Tabelle einfügen. Dafür habe ich folgendes Script geschrieben:
Welches sich noch massiv vereinfachen lässt.
var tableElement = document.createElement("table"); //table element kreieren
var tableAttribut = document.createAttribute("id"); //attribut "id" kreieren
tableAttribut.nodeValue = "popup_table"; //id-attribut zuweisen
tableElement.setAttributeNode(tableAttribut);//attribut eintragen
document.getElementById("popup_div").appendChild(tableElement); //table-element in div eintragen
~~~javascript
var tableElement = document.createElement('table');
tableElement.id = 'popup_table';
document.getElementById('popup_div').appendChild(tableElement);
var trElement = document.createElement("tr"); //tr-element für Überschrift kreieren
var trAttribut = document.createAttribute("id"); //attribut "id" kreieren
trAttribut.nodeValue = "tr_titel"; //id-attribut zuweisen
trElement.setAttributeNode(trAttribut);//attribut eintragen
document.getElementById("popup_table").appendChild(trElement); //tr-element in table eintragen
~~~javascript
var trElement = tableElement.[link:http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-39872903@title=insertRow](-1);
trElement.id = 'tr_titel';
var tdElement = document.createElement("td"); //
var tdAttribut = document.createAttribute("id"); //attribut "id" kreiern
tdAttribut.nodeValue = "popup_titel"; //id-attribut zuweisen
tdElement.setAttributeNode(tdAttribut);//attribut eintragen
document.getElementById("tr_titel").appendChild(tdElement); //td-element in tr eintragen
~~~javascript
var tdElement = trElement.[link:http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-68927016@title=insertCell](-1);
tdElement.id = 'popup_titel';
jetzt dachte ich mir, dass ich mit folgendem Code-Schnipsel
[…]
einen Text in die td eintragen kann. Das funktioniert aber nicht, was mache ich falsch?
Was hat deine Fehlerdiagnose ergeben? Warum erwähnst du nicht, dass dieses Problem nur im IE auftaucht?
Der Text wird eingefügt, wass du an Hand der Ausgabe von innerHTML und dergleichen überprüfen kannst. Warum er jedoch nicht sichtbar ist, erschließt sich auch mir nicht. Selbst bei innerText wird nichts angezeigt, obwohl der Text eingefügt wurde.
Ich frage mich, über welchen der vielen Bugs des IE du hier gestolpert bist.
Einen schönen Sonntag noch.
Gruß, Ashura
Hallo Ashura,
Welches sich noch massiv vereinfachen lässt.
danke erst einmal dafür!
Was hat deine Fehlerdiagnose ergeben? Warum erwähnst du nicht, dass dieses Problem nur im IE auftaucht?
Habe ich schlichtweg vergessen *schäm*
Der Text wird eingefügt, wass du an Hand der Ausgabe von innerHTML und dergleichen überprüfen kannst. Warum er jedoch nicht sichtbar ist, erschließt sich auch mir nicht. Selbst bei innerText wird nichts angezeigt, obwohl der Text eingefügt wurde.
interessant, dann weiß ich jetzt wenigstens, dass ich nicht weiter nach Syntaxfehlern graben muss :-)
mfg Julian
Hallo Julian.
interessant, dann weiß ich jetzt wenigstens, dass ich nicht weiter nach Syntaxfehlern graben muss :-)
Dein Code war syntaktisch einwandfrei, keine Sorge.
Ich glaube nun das Problem gefunden zu haben: der IE ist im Gegensatz zu anderen Browsern besonders pingelig, was das implizite tbody-Element angeht.
Erzeuge daher ein tbody-Element (nein, dafür gibt es leider keine vorgefertige Methode), hänge dies zuallererst in die Tabelle ein und alle weiteren Tabellenzeilen dann in dieses tbody-Element. Damit wird der Text auch im IE sichtbar.
Einen schönen Sonntag noch.
Gruß, Ashura
Hallo Ingrid.
Erzeuge daher ein tbody-Element (nein, dafür gibt es leider keine vorgefertige Methode), hänge dies zuallererst in die Tabelle ein und alle weiteren Tabellenzeilen dann in dieses tbody-Element. Damit wird der Text auch im IE sichtbar.
Dies ist übrigens nicht erforderlich, wenn du mit den vorgefertigten Methoden insertRow und insertCell arbeitest. Hier fügt der IE wiederum implizit das tbody-Element ein und der Text wird sichtbar.
Einen schönen Sonntag noch.
Gruß, Ashura
Hallo,
Hallo Ingrid.
Interessant, welche Spitznamen ihr euch insgeheim gebt.
Viele Grüße
Hallo Richard.
Hallo Ingrid.
Interessant, welche Spitznamen ihr euch insgeheim gebt.
Einen schönen Sonntag noch.
Gruß, Ashura
Hallo,
Alles klar Detlef, jetzt hab ichs verstanden.
Viele Grüße
Hallo Ashura,
Danke nochmal für deine Bemühungen, schon wieder was gelernt!
Ich habe mein Problem inzwischen anders (und einfacher) gelöst.
Aufgabenstellung war ja folgende: Text soll in eine Dynamische Tabelle geschrieben werden. Ist diese schon vorhanden soll sie gelöscht werden.
Da meine Tabelle aber immer gleich aussieht und sich nur der Text ändert habe ich die Tabelle direkt ins Dokument hineingeschrieben (also nicht dynamisch) und ändere jetzt nur den Inhalt.
Falls schon etwas drinnsteht wird dies mit folgendem Code gelöscht:
while(document.getElementById("popup_titel").hasChildNodes()) //während "popup_titel" kindknoten hat
{
var knoten = document.getElementById("popup_titel").firstChild //auslesen des Knotens
document.getElementById("popup_titel").removeChild(knoten); //entfernen des knotens
mfg Julian