Neue Tabelle mit Javascript

[andrenalin]

Hallo Leute,

ich bin im Fachgebiet JavaScript wirklich nicht gebildet.
Ich versuche mit JavaScript eine Tabelle mit Inhalt zu erstellen.

Ich habe mittlerweile viel gelesen und viel getestet aber ich verzweifle grade.

Script

  
  
<script type="text/javascript">  
  
  
  
var zahl=0;  
function neuerRaum() {  
	  
	zahl=zahl+1;  
	  
var table = document.getElementById('newRoom');  
var newRowHTML = '<tr><td width="400" align="left" valign="top">Viel Inhalt und auch die Ausgabe mit Zahl+, funktioniert auch, nur nicht im IE</td></tr>';  
table = table.getElementsByTagName('tbody')[0] || table;  
  
var newRow = document.createElement('thead');  
newRow.setAttribute("width", "100%");  
//newRow.setAttribute("border", "1");  
//newRow.setAttribute("cellpadding", "7");  
//newRow.setAttribute("cellspacing", "1");  
//newRow.setAttribute("bgcolor", "#ccc");  
newRow.innerHTML = newRowHTML;  
table.appendChild(newRow);  
  
}  
</script>  
  
  

Button und Tabelle

  
<input type="button" name="newRoom" onClick="neuerRaum()" value="hinzuf&uuml;gen" class="inputButton">  
  
<table width="650" border="1" align="center" cellpadding="7" cellspacing="1" bgcolor="#CCCCCC">  
<tbody id="newRoom">  
</tbody>  
</table>  

Was muss ich machen damit das auch im IE funktioniert?

Ich habe viel von tbody und thead gelesen und hab das auch nach gutem Gewissen berücksichtigt...
Aber ich bekomme es nicht zum laufen!

Ich bedanke mich für eure Hilfe!

[ChrisB]

Hi,

var newRow = document.createElement('thead');
newRow.innerHTML = newRowHTML;

Die MSDN erwähnt es inzwischen nicht mehr explizit - aber zumindest in der Vergangenheit (d.h., in älteren IE-Versionen) war innerHTML von MicroSoft u.a. für THEAD-Elemente als read-only definiert.

MfG ChrisB

[T-Rex]

Also wenn du eine Tabelle wirklich komplett in Javascript aufbauen willst, dann brauchst du auf jeden Fall einen Punkt wo das ganze Gedöns ins HTML (DOM) kommt. z.B.
<div id='pastTable'></div>
Wieso weshalb, später.

Jetzt bauen wir die Tabelle
var objTable = document.createElement("table");

mit document.createElement(), erzeugst du ein neues HTML Tag. In diesem Fall eine leere table Hülle.

var objHead = document.createElement("thead");
Jetzt hast du eine Kopfhülle. Auch noch ohne Inhalt.

objTable.appendChild(objHead);
Jetzt haben wir beide Elemente Zusammen gebracht. Genauer gesagt ist der Kopf jetzt ein Kind Element von table. Als HTML Code sieht das ganze so aus:
<table>
   <thead>
   </thead>
</table>

Jetzt braucht thead eine Zeile:
var objRow = document.createElement("tr");
objHead.appendChild(objRow);

Zeile erzeugt und als Kind hinzugefügt.

Nach diesem Prinzip baust du die Tabelle auf.
Wenn die Tabelle fertig aufgebaut ist setzt du alles in das bereits im HTML stehende Element:

document.getElementById('pastTable').appendChild(objTable);

Und schon steht die dynamisch erzeugte Tabelle im html.

Gruß
T(able)-Rex

[Felix Riesterer]

Lieber T-Rex,

dann brauchst du auf jeden Fall einen Punkt wo das ganze Gedöns ins HTML (DOM) kommt.

das kommt ganz darauf an.

z.B. <div id='pastTable'></div> Wieso weshalb, später.

Besser nicht so. Besser wäre, die Tabelle nach einem bereits bekannten Element ins DOM einzuhängen. Was spricht denn dagegen, den ersten/letzten Textabsatz, oder das erste/letze Element mit einer bestimmten Klasse als Einhängepunkt (davor/danach) zu nutzen? Immer diese DIV-Suppen...

Was den Rest Deiner Hilfe angeht so finde ich sie erstklassig. Einfach fachlich hilfreich.

Liebe Grüße,

Felix Riesterer.

[T-Rex]

Besser nicht so. Besser wäre, die Tabelle nach einem bereits bekannten Element ins DOM einzuhängen. Was spricht denn dagegen, den ersten/letzten Textabsatz, oder das erste/letze Element mit einer bestimmten Klasse als Einhängepunkt (davor/danach) zu nutzen? Immer diese DIV-Suppen...

Da hast du natürlich recht.
Ich wollte nur deutlich machen, dass es mindestens ein bekanntes Element im HTML geben muss. Und wenn es nur der body ist.

Und danke für das Kompliment :).

Gruß
erfreuter
T-Rex

[MudGuard]

Hi,

table = table.getElementsByTagName('tbody')[0] || table;

table ist jetzt also ein tbody-Element.

var newRow = document.createElement('thead');

newRow ist jetzt also ein thead-Element.

newRow.setAttribute("width", "100%");

thead hat kein width-Attribut.

//newRow.setAttribute("border", "1");
//newRow.setAttribute("cellpadding", "7");
//newRow.setAttribute("cellspacing", "1");
//newRow.setAttribute("bgcolor", "#ccc");

Die passen auch nicht zu thead, sondern zu table (alle gehören aber eigentlich durch CSS ersetzt).

table.appendChild(newRow);

Hier hängst Du ein thead in ein tbody ein. tbody darf aber nur tr enthalten.

cu,
Andreas

[andrenalin]

Hi,

table.appendChild(newRow);

Hier hängst Du ein thead in ein tbody ein. tbody darf aber nur tr enthalten.

Hab ich mir gedacht, allerdings will ich in die Tabelle 10 Zeilen mit 3 Spalten einfügen, wenn ich also ein tr erstelle, stimmt das ganze nicht mehr wenn ich mehrere Zeilen einfügen will...

Ich hab wirklich schon 1000 threads gelesen, aber keinen hab ich anwenden oder wirklich verstehen können.

Ich habe auch eine fixe Tabelle die vor der zu erstellenden kommt.
Kann ich danach nicht eine Komplette Tabelle erstellen?

appendChild ist ja etwas zum anhängen anfügen in etwas bestehendes, was muss ich denn machen um nach der table id=1
eine komplette table zu erstellen...

Das komische ist ja dass es in allen Browsern ausser im IE funktioniert und daran verzweifle ich...

DANKE

[MudGuard]

Hi,

Hier hängst Du ein thead in ein tbody ein. tbody darf aber nur tr enthalten.
Hab ich mir gedacht, allerdings will ich in die Tabelle 10 Zeilen mit 3 Spalten einfügen, wenn ich also ein tr erstelle, stimmt das ganze nicht mehr wenn ich mehrere Zeilen einfügen will...

Muß ich das jetzt verstehen?

Es stimmt JETZT schon nicht, weil Du ein thead in ein tbody einfügen willst. thead darf aber nur in table direkt vorkommen (vor dem tbody).

Ich hab wirklich schon 1000 threads gelesen, aber keinen hab ich anwenden oder wirklich verstehen können.

Naja, solange Du noch nicht mal verstehst, wie eine HTML-Tabelle aufgebaut ist, wird das mit dem dynamischen Erzeugen von Tabellenteilen nichts werden ...

Ich habe auch eine fixe Tabelle die vor der zu erstellenden kommt.
Kann ich danach nicht eine Komplette Tabelle erstellen?

Man kann. Du offensichtlich nicht.

appendChild ist ja etwas zum anhängen anfügen in etwas bestehendes, was muss ich denn machen um nach der table id=1
eine komplette table zu erstellen...

Eine komplette Tabelle erstellen und sie nach der Tabelle mit der id in deren Elternelement einfügen.

Das komische ist ja dass es in allen Browsern ausser im IE funktioniert und daran verzweifle ich...

Weil die halt eine andere Art haben, mit Deinem fehlerhaften Code umzugehen.

cu,
Andreas

[andrenalin]

OK, hab ja verstanden was ich alles falsch mache.

Wie eine Tabelle aufzubauen ist ist ja auch schon klar..
jetzt noch etwas deutlicher sogar
table thead tbody tr td

Gut, es geht ja nun mal darum das ganze über einen button mit javascript zu realisieren.
ich habe mir ein script gesucht, es versucht anzupassen, das hier war die letzte versuchsversion, thead ist falsch haben wir ja nun festgestellt, aber was muss ich mit meinem script anstellen, damit es im ie, oder überhaupt richtig funktioniert?

Urgedanke

  
  
var zahl=0;  
function neuerRaum() {  
	  
	zahl=zahl+1;  
	  
var table = document.getElementById('newRoom'); //wir suchen uns ein Plätzchen mit der ID  
  
  
var newRowHTML = '<tr><td>'+Zahl+'</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr>';  
  
// jetzt haben wir schönen neuen inhalt definiert  
  
table = table.getElementsByTagName('tbody')[0] || table;  
//suchen irgendwo einen tbody,  
  
  
var newRow = document.createElement('tr');  
//hier generieren wir das eltern element das vor der newRow geschrieben wird  
  
newRow.innerHTML = newRowHTML;  
//hier wird tr und nochwas zu der var newRowHTML  
  
table.appendChild(newRow);  
//so und hier mit append wird das ganze eingefügt...  
  
}  
</script>  

Problem hier ist allerdings das mit den Zeilen.

Wenn ich nur TD hätte wäre es ja kein Problem, aber da ich ja mehrere Zeilen habe funktioniert das nicht...

MUSS ICH FÜR JEDE ZEILE JETZT EINE newRowHTML erstellen oder
kann man direkt unter einer bestehenden FIXEN Tabelle die eine ID hat eine neue generieren lassen?

GET ID und unter dieser Tabelle schreibe mir jetzt doch bitte die Tabelle...

Ich hoffe ich habe mich jetzt etwas verständlicher ausgedrückt, manchmal fällt es mir ja selber schwer zu lesen was ich schreibe :)

JAVASCRIPT ist für mich nicht verständlich, ich weiss nur leider noch nicht warum... schade eigentlich aber ich finde html/php und sogar sql einfach einfacher...