Javascript Tabellen mit DOM

[Lukas G. (lukas88)]

Hallo Users,

Ich beschäftige mich momentan mit DOM in Javascript. Für ein Projekt 
will ich Tabellen dynamisch generieren können. In diese Tabellen/Cellen 
solle dann Werte angezeigt werden. Das Problem ist nun, ich kann die 
Tabellen generieren, doch nicht mit Daten befüllen!

   function add_category( )
    {
        var zeile;
        var spalte;
        var i;
        var z=0;
        var w;
        var t;
        var x = document.createElement("TABLE");
        x.setAttribute("id","add_cat_table");
        x.setAttribute("width","100%");
        x.setAttribute("border","1");
        document.getElementById("add_dialog_c").appendChild(x);

        for(zeile=0;zeile<=4;zeile++)
        {
        var y =document.createElement("TR");
        y.setAttribute("id","myTR"+zeile);
        document.getElementById("add_cat_table").appendChild(y);
        }

        for(i=0;i<=5;i++)
        {
        for(spalte=0;spalte<=4;spalte++)
        {
        w= document.createElement("TD");
        w.setAttribute("id","row"+z);
        t = document.createElement("p");
        t.setAttribute("id","cell"+z);
        w.appendChild(t);
        document.getElementById("myTR"+i).appendChild(w);
        z++;
        }
        }
        document.getElementById("cell0").innerHTML ="11";

    }

Mit document.getElementById("cell0").innerHTML ="11" kann ich aber keine 
Werte der cell0 hinzufügen und anzeigen lassen.

Was genau habe ich übersehen, falsch gemacht?

bg  lukas

[Joachim S. (oyo)]

Ziemlich umständlich (und nicht besonders schön), der Code.

Was genau der Fehler ist, kann ich Dir auf Anhieb auch nicht sagen, 
aber:
Hast Du mal...
- überprüft, ob irgendwelche Fehlermeldungen auf die Javascript-Konsole 
ausgegeben werden? Beispielsweise erzeugst Du zuerst Zeilen mit einem 
Index von 0<=zeile<=4, und später loopst Du dann über die Zeilen mit der 
Variable i im Bereich 0<=i<=5, beim letzten Schleifendurchlauf dürften 
also vermutlich irgendwelche Fehler auftreten, weil Du dann effektiv 
null.appendChild(...) aufrufst. Möglicherweise funktioniert das 
document.getElementById("cell0").innerHTML ="11"; Statement am Ende der 
Funktion also einfach deshalb nicht, weil die Funktion gar nicht erst 
bis zu dieser Stelle kommt?

- Dir den DOM angeschaut, ob der DOM tatsächlich genau so erzeugt wurde, 
wie Du Dir das gedacht hast?

[Daniel A. (daniel-a)]

Ich arbeite immer gerne mit dem DOM, und empfehle aus erfahrung auf id's 
wann immer möglich zu verzichten. Ausserdem empfehle ich hier die 
Referenzen auf die Elemente die du bereits hast weiter zu verwenden, 
statt zu hoffen dass getElementById das richtige Element findet. Dinge 
wie width="100%" macht mann besser mit CSS und dem class attribut. Bei 
HTML-Dokumenten können zudem viele Attribute direckt gesetzt werden. 
Wenn man das ganze etwas aufraumt fällt auch gleich auf, dass du in der 
2ten Schleife durch 6 Zeilen iterierst, in der ersten aber nur 5 
erstellst. Ich würde das so schreiben:

JS:

function create_category_table(){

  var table = document.createElement("table");
  table.classList.add("add_cat_table");
  table.border = 1;

  table.cell = [];

  var tbody = document.createElement("tbody");
  table.appendChild(tbody);

  for( var zeile=0; zeile <= 4; zeile++ ){

    var tr = document.createElement("tr");
    tbody.appendChild(tr);

    var row = [];
    table.cell.push(row)

    for( var spalte=0; spalte <= 4; spalte++ ){

      var td = document.createElement("td");
      tr.appendChild(td);

      var p = document.createElement("p");
      td.appendChild(p);
      row.push(p);

    }

  }

  table.cell[0][0].innerHTML = "<b>Hello</b>";
  table.cell[0][0].appendChild(document.createTextNode(" World!"));

  return table;
}

var category_table = create_category_table();
document.getElementById("add_dialog_c").appendChild(category_table);

CSS:

.add_cat_table {
  width: 100%;
}

[Lukas G. (lukas88)]

Zuerst: Vielen dank für eure tollen Antworten!

Es war tatsächlich ein Schleifenfehler. Hätt ich auch selbst drauf 
kommen können... Aber nachmal sieht man das Offensichtliche vor lauter 
Fehlersuche nicht mehr : ))