Peter: Mit Javascript HTML Tabelle erstellen

Hallo,

ich versuche mit Javascript eine HTML Tabelle zu erstellen und mit den Inhalten von daten1 und daten2 zu füllen:

  
  
document.getElementById('div1').innerHTML += "<table border='0'>";  
for(var i = 0; i < 10; i++){  
  document.getElementById('div1').innerHTML += ("<tr> <td>" + daten1[i] + "</td><td>" + daten2[i] + "</td></tr>");  
}  
document.getElementById('div1').innerHTML += "</table>";  
  

  
<body>  
    <div id="div1"></div>  
</body>  
  
  

Leider klappt es nicht. Wenn ich mit Firebug das div Element ansehe, dann steht da nur "<table> </table>" Jetzt weiß ich nicht mehr weiter. Wäre für jede Hilfe sehr dankbar!

  1. Hallo!

    Schau dir mal http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=createElement an und hänge die Elemente so in das DOM.

    Grüße, Matze

  2. Wenn du das innerHTML eines Elementes setzt, parst der Browser das und setzt es um.
    Dabei geht er sehr fehlertollerant vor. Aus deinem
    document.getElementById('div1').innerHTML += "<table border='0'>";
    macht er vermutlich
    "<table border='0'></table>"
    Anders kann er (außer die Tabelle wegzulassen) ja auch nicht vorgehen, wie soll er wissen, das du im nächsten Schritt Zeilen und Spalten einfügen willst? Er müsste ja auf irgendein Ende warten, ehe er parst.
    Du musst also erst den kompletten String zusammenbasteln und diesen dann zuweisen (die ganze Tabelle in einem Rutsch).

    1. Wenn du das innerHTML eines Elementes setzt, parst der Browser das und setzt es um.
      Dabei geht er sehr fehlertollerant vor. Aus deinem
      document.getElementById('div1').innerHTML += "<table border='0'>";
      macht er vermutlich
      "<table border='0'></table>"
      Anders kann er (außer die Tabelle wegzulassen) ja auch nicht vorgehen, wie soll er wissen, das du im nächsten Schritt Zeilen und Spalten einfügen willst? Er müsste ja auf irgendein Ende warten, ehe er parst.
      Du musst also erst den kompletten String zusammenbasteln und diesen dann zuweisen (die ganze Tabelle in einem Rutsch).

      Alles klar. Danke!

    2. Hallo,

      Dabei geht er sehr fehlertollerant vor.

      ja, das ist toll. Leider hat aber "toll" nichts mit "tolerant" zu tun. ;-)

      Du musst also erst den kompletten String zusammenbasteln und diesen dann zuweisen (die ganze Tabelle in einem Rutsch).

      Genau. Oder direkt im DOM basteln, wie Matze vorgeschlagen hat.

      Ciao,
       Martin

      --
      Fettflecke werden wieder wie neu, wenn man sie regelmäßig mit etwas Butter einschmiert.
      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      1. ja, das ist toll. Leider hat aber "toll" nichts mit "tolerant" zu tun. ;-)

        Bin erst Level 2