Javascript Tabellen mit DOM

OP #5004966
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!
1
   function add_category( )
2
    {
3
        var zeile;
4
        var spalte;
5
        var i;
6
        var z=0;
7
        var w;
8
        var t;
9
        var x = document.createElement("TABLE");
10
        x.setAttribute("id","add_cat_table");
11
        x.setAttribute("width","100%");
12
        x.setAttribute("border","1");
13
        document.getElementById("add_dialog_c").appendChild(x);
14

15
        for(zeile=0;zeile<=4;zeile++)
16
        {
17
        var y =document.createElement("TR");
18
        y.setAttribute("id","myTR"+zeile);
19
        document.getElementById("add_cat_table").appendChild(y);
20
        }
21

22
        for(i=0;i<=5;i++)
23
        {
24
        for(spalte=0;spalte<=4;spalte++)
25
        {
26
        w= document.createElement("TD");
27
        w.setAttribute("id","row"+z);
28
        t = document.createElement("p");
29
        t.setAttribute("id","cell"+z);
30
        w.appendChild(t);
31
        document.getElementById("myTR"+i).appendChild(w);
32
        z++;
33
        }
34
        }
35
        document.getElementById("cell0").innerHTML ="11";
36

37
    }

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
#5005042
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?
#5005582
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:
1
function create_category_table(){
2

3
  var table = document.createElement("table");
4
  table.classList.add("add_cat_table");
5
  table.border = 1;
6

7
  table.cell = [];
8

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

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

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

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

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

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

25
      var p = document.createElement("p");
26
      td.appendChild(p);
27
      row.push(p);
28

29
    }
30

31
  }
32

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

36
  return table;
37
}
38

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

CSS:
1
.add_cat_table {
2
  width: 100%;
3
}

Antwort schreiben

Eine eigene Frage? Dieser Thread ist über 9 Jahre alt. Stell sie in einem eigenen Thread – dort lesen mehr Leute mit, und sie wird öfter und schneller beantwortet.

Neuen Thread starten

Eine Lösung, Ergänzung oder Rückmeldung zu diesem Thread? Dann antworte hier.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.