Problem mit erstellen einer Tabelle mittels JS

[Diana]

Ich habe folgendes Problem , ich bin noch Anfängerin und lerne noch und würde gerne zum üben eine Tabelle dynamisch mittels JS erstellen und diese dann einfügen . Leider klappt es irgendwie nicht und ich habe leider keine Ahnung woran das liegen könnte . Habe auch schon das Forum durchsucht , aber leider nichts passendes gefunden was mir weiterhilft . ein großes Bussi für jedem der mir hilft , bin wirklich am verzweifeln

Hier nun der Code

var tr;
 var td;

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

for(i=0;i<1;i++){
 tr = document.createElement("tr");
 table.appendChild(tr);

for(j=0;j<1;j++){
  td = document.createElement("td");
  td.setAttribute("id",i+"_"+j);
  td.appendChild(document.createTextNode("hi text"));// damit man was sieht
  tr.appendChild(td);
 }
}

[Der Martin]

Hallo Diana,

Ich habe folgendes Problem , ich bin noch Anfängerin und lerne noch und würde gerne ...

das ist kein Problem, sondern eine lobenswerte Absicht. :)

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

Okay, damit erzeugst du ein neues table-Elementobjekt, ...

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

hängst ihm sein tbody an (gut, das wird nämlich gern vergessen), ...

[...]

und fügst dann nach und nach Zeilen und Zellen hinzu. Sieht alles korrekt und schlüssig aus. Ich vermisse nur die Stelle, an der du irgendwann das table-Element mit all seinen Kindelementen auch an das body-Element anhängst. Du nicht?
Das ist ein bisschen so, als wenn ich den Pizzateig fertig zubereite und belege, und dann nicht in den Ofen schiebe, sondern einfach unbeachtet liegenlasse.

So long,
 Martin

[Diana]

doch doch , das mach ich schon . Nur wollte ich nicht zuviel code posten . in der html datei ist folgendes element
<div id="box4" >
</div>

und in der js datei ist für diesen Vorgang folgendes noch unter den schleifen

var tr;
 var td;

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

for(i=0;i<1;i++){
 tr = document.createElement('tr');
 table.appendChild(tr);

for(j=0;j<1;j++){
  td = document.createElement('td');
  td.setAttribute("id",i+"_"+j);
  td.appendChild(document.createTextNode("hi text"));// damit man was sieht
  tr.appendChild(td);
 }
}

document.getElementById(box4).appendChild(table);

----------------------------------------------------
daher ja meine verzweiflung , ich habe auch nochmal einiges nachgelesen und verstehe einfach nicht warum er es nicht erzeugt :(

[Oku]

Einen schönen guten Abend.

document.getElementById(box4).appendChild(table);

Wo ist denn die Variable box4 deklariert?

So long,
Oku

[Oku]

Einen schönen guten Abend.

Becor ich's noch vergesse:

Existiert denn der Div-Container zu dem Zeitpunkt, zu dem die Tabelle an ihn angehängt wird?

So long,
Oku

[Diana]

das ist eine gute Frage da JS ja zuerst ausgeführt wird oder . Jedoch habe ich nun folgendes getan
das tabelle erstellen in eine function gepackt um es erst nachdem die Seite aufgebaut wurde auszuführen per klick auf einen button . Die function wird auch aufgerufen , jedoch wird die Tabelle nicht erstellt . Habe nun auch das box4 in "" gepackt , trotzdem keine reaktion :(

var tr;
 var td;

function tabelleerstellen(){
 alert("function geht");//um zu sehen ob die function bei klick auf button ausgeführt wird was funktioniert
 var table = document.createElement("table");
 table=table.appendChild(document.createElement("tbody"));

for(i=0;i<1;i++){
  tr = document.createElement('tr');
  table.appendChild(tr);

for(j=0;j<1;j++){
   td = document.createElement('td');
   td.setAttribute("id",i+"_"+j);
   td.appendChild(document.createTextNode("hi text"));// damit man was sieht
   tr.appendChild(td);
  }
 }

document.getElementById("box4").appendChild(table);
}

[wahsaga]

hi,

Die function wird auch aufgerufen , jedoch wird die Tabelle nicht erstellt . Habe nun auch das box4 in "" gepackt , trotzdem keine reaktion :(

Du versuchst immer noch, das falsche Element einzuhängen.

gruß,
wahsaga

[Diana]

danke euch , mus ja das tbody element in table einhängen und tr dann in tbody . Manchmal ist man aber auch zu schusselig :)
VIELEN DANK EUCH ALLEN

[Diana]

document.getElementById(box4).appendChild(table);

Wo ist denn die Variable box4 deklariert?

ich habe in meiner html datei folgendes

</tr>
</table>

<div id="box4" >
</div>
</body></html>

habe das zwar auch oben gepostet , aber wahrscheinlich nicht alzu gut , übersieht man vielleicht . weis niemand rat ?

[wahsaga]

hi,

document.getElementById(box4).appendChild(table);

Wo ist denn die Variable box4 deklariert?

ich habe in meiner html datei folgendes

<div id="box4" >

Das ist nicht die Antwort auf die Frage.

Du verwendest an der Stelle eine Javascript-Variable namens box4 - aber eigentlich meinst du keine Variable, sondern eine String mit diesem Textinhalt.

gruß,
wahsaga

[MudGuard]

Hi,

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

Du weißt also, daß in einem table-Element ein tbody erforderlich ist.

table.appendChild(tr);

Dennoch versuchst Du, die Zeilen direkt in die table statt ins tbody einzuhängen ...

cu,
Andreas

[Der Martin]

Hi Andreas,

Du weißt also, daß in einem table-Element ein tbody erforderlich ist.

ja, das weiß sie offensichtlich.

table.appendChild(tr);
Dennoch versuchst Du, die Zeilen direkt in die table statt ins tbody einzuhängen ...

Nein:

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

Gibt appendChild() nicht eine Referenz auf das neu angehängte Kindelement zurück?

So long,
 Martin

[wahsaga]

hi,

Dennoch versuchst Du, die Zeilen direkt in die table statt ins tbody einzuhängen ...

Nein:

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

Gibt appendChild() nicht eine Referenz auf das neu angehängte Kindelement zurück?

Ja, jetzt referenziert table also auf den Tbody.

Dann ist es aber keine so gute Idee, anschließend diesen direkt in den Div einhängen zu wollen:

document.getElementById(box4).appendChild(table);

gruß,
wahsaga

[MudGuard]

Hi,

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

Gibt appendChild() nicht eine Referenz auf das neu angehängte Kindelement zurück?

Gibt appendChild überhaupt was zurück?
http://de.selfhtml.org/javascript/objekte/node.htm#append_child schweigt sich dazu aus ...

Ok, laut [http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-184E7107] müßte es das

Daß die Variable namens table mal die Tabelle und mal den Tabellenkörper enthält, hab ich tatsächlich übersehen - wer macht denn aber auch so einen Unsinn?

cu,
Andreas

[Diana]

MudGuard du bist ein Schatz , dank dir . Ich sah scheinbar den Wald vor lauter Bäumen nicht *fg* :)