Forum: PC-Programmierung Javascript Tabellen mit DOM


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Lukas G. (lukas88)


Bewertung
0 lesenswert
nicht lesenswert
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

von Joachim S. (oyo)


Bewertung
0 lesenswert
nicht lesenswert
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?

von Daniel A. (daniel-a)


Bewertung
0 lesenswert
nicht lesenswert
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
}

: Bearbeitet durch User
von Lukas G. (lukas88)


Bewertung
0 lesenswert
nicht lesenswert
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 : ))

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.
Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt.
Bitte hier nur auf die ursprüngliche Frage antworten,
für neue Fragen einen neuen Beitrag erstellen.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.