Julian: dynamisch generierte tabelle

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

  1. 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

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]
    1. 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

      1. 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

        --
        sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
        „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
        [HTML Design Constraints: Logical Markup]
        1. 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

          --
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
          „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
          [HTML Design Constraints: Logical Markup]
          1. Hallo,

            Hallo Ingrid.

            Interessant, welche Spitznamen ihr euch insgeheim gebt.

            Viele Grüße

            --
            (((C = C + 1 == C++) == true) == true)
            1. Hallo Richard.

              Hallo Ingrid.

              Interessant, welche Spitznamen ihr euch insgeheim gebt.

              Aber wir doch nicht.

              Einen schönen Sonntag noch.

              Gruß, Ashura

              --
              sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
              „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
              [HTML Design Constraints: Logical Markup]
              1. Hallo,

                Aber wir doch nicht.

                Alles klar Detlef, jetzt hab ichs verstanden.

                Viele Grüße

                --
                (((C = C + 1 == C++) == true) == true)
          2. 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