Dynamisch Zeilen zu einer Tabelle hinzufügen

[Yeti]

Hi,
ich versuche gerade, dynamisch eine Zeile zu einer Tabelle hinzuzufügen (document.getElementById("tabellenid").methode). Folgende Versuche für "methode" schlugen fehl:

1. insertAdjacentHTML[1], AfterEnd funktioniert aber schreibt die Zeile hinter den Table => unnütz, BeforeEnd funktioniert nicht (Fehlermeldung "Das Zielelement dieser Operation ist nicht gültig")
2. innerHTML[2] += '<tr>...</tr>' gibt Fehlermeldung "Unknown runtime error"
3. appendChild[3] macht gar nix, noch nicht mal eine Fehlermeldung

Irgendwelche anderen Vorschläge? Muss nicht notwendigerweise cross-Browser sein, aber in jedem Fall im IE 5.0+ funktionieren.
Danke im Voraus, der Yeti

[1] http://de.selfhtml.org/javascript/objekte/all.htm#insert_adjacent_html
[2] http://de.selfhtml.org/javascript/objekte/all.htm#inner_html
[3] http://de.selfhtml.org/javascript/objekte/node.htm#append_child

Codeschnipsel:
<table border="1" id="rechnungsposten">     <tr><th>#</th><th>Menge</th><th>Produkt</th><th>Einzelpreis</th><th>Gesamtpreis</th></tr>
 <tr>
  <td>1.</td>
  <td><input type="text" name="menge[1]" size="3" onBlur="calcRech();"></td>
  <td><input type="text" name="produkt[1]" size="20"></td>
  <td><input type="text" name="einzelpreis[1]" size="5" onBlur="calcRech();displaynext(1);"> &euro;</td>
  <td><span id="gesamtpreis1">0,00</span> &euro;</td>
 </tr>
</table>

function displaynext(nr) führt dann das beschriebene JavaScript aus.

[Thomas Meinike]

Hallo,

ich versuche gerade, dynamisch eine Zeile zu einer Tabelle hinzuzufügen (document.getElementById("tabellenid").methode). Folgende Versuche für "methode" schlugen fehl:
...

row=document.createElement("tr");
// hier neue td-Zellen einhaengen ...
document.getElementById("rechnungsposten").getElementsByTagName("tbody")[0].appendChild(row);

MfG, Thomas

[Yeti]

Hi,

row=document.createElement("tr");
// hier neue td-Zellen einhaengen ...
document.getElementById("rechnungsposten").getElementsByTagName("tbody")[0].appendChild(row);

Ah, jetzt klappt's! Danke.
Habe mir gerade mal innerHTML vom TABLE ausgeben lassen und gemerkt, dass der IE wohl automatisch einen TBODY hinzufügt, selbst wenn keiner vorgegeben ist. Hatte bisher gedacht, mein Quellcode würde auch so im Browser umgesetzt, aber Pustekuchen.

Aber jetzt ist auch klar, warum das ohne ".getElementsByTagName("tbody")[0]." nicht klappen konnte.

Der Yeti

[MudGuard]

Hi,

ich versuche gerade, dynamisch eine Zeile zu einer Tabelle hinzuzufügen (document.getElementById("tabellenid").methode). Folgende Versuche für "methode" schlugen fehl:

Dir ist bewußt, daß in HTML die tr-Elemente nicht direkte Kinder von table sind, sondern in thead, tfoot oder (meistens) in tbody stehen?

Die tags des tbody-Elements sind beide optional, müssen also nicht explizit hingeschrieben sein, damit das Element tbody existiert.

cu,
Andreas

[Yeti]

Hi,

Dir ist bewußt, daß in HTML die tr-Elemente nicht direkte Kinder von table sind, sondern in thead, tfoot oder (meistens) in tbody stehen?

Die tags des tbody-Elements sind beide optional, müssen also nicht explizit hingeschrieben sein, damit das Element tbody existiert.

Nee, bis gerade eben war mir das nicht bewusst. Aber danke!

Der Yeti

[Yeti]

Hi,
appendChild funktioniert jetzt ja, nachdem mein Denkfehler ausgeräumt wurde. Aber geht es nicht noch ein bisschen einfacher?
Ich habe für eine Tabellenzeile in HTML folgenden Code (7 Zeilen):

<tr>
 <td>1.</td>
 <td><input type="text" name="menge[1]" size="3"></td>
 <td><input type="text" name="produkt[1]" size="20"></td>
 <td><input type="text" name="einzelpreis[1]" size="5" onBlur="calcRech();displaynext(1);"> &euro;</td>
 <td><span id="gesamtpreis1">0,00</span> &euro;</td>
</tr>

Wohingegen JavaScript dafür 37 (!) Zeilen braucht...

Und noch eine Frage: Wie kann ich Entitäten hinzufügen? createTextNode("&euro;") gibt mir den String anstatt des Euro-Symbols, createTextNode("€") nur ein Kästchen. Gut, "EUR" klappt...

Der Yeti

[Thomas Meinike]

Hallo,

Wohingegen JavaScript dafür 37 (!) Zeilen braucht...

Mit innerHTML wird es weniger und mit einer optmierteren Funktion ließe sich auch etwas machen, z. B. der Einsatz von cloneNode() bietet sich an.

Und noch eine Frage: Wie kann ich Entitäten hinzufügen? createTextNode("&euro;") gibt mir den String anstatt des Euro-Symbols, createTextNode("€") nur ein Kästchen. Gut, "EUR" klappt...

Normalerweise gibt es dafuer die DOM-Methode createEntityReference() sofern das gewunschte Entity auch in der DTD deklariert wurde. Das beherrschen aber die Browser (noch) nicht. Im SVG-Kontext kann man diese Methode beispielsweise benutzen: http://svglbc.datenverdrahten.de/?code=create-methods&znr=on.

Erzeuge die Sonderzeichen alternativ so (als Teilstring behandeln):
euro=String.fromCharCode(8364);

MfG, Thomas

[Yeti]

Hi,

Mit innerHTML wird es weniger und mit einer optmierteren Funktion ließe sich auch etwas machen, z. B. der Einsatz von cloneNode() bietet sich an.

innerHTML bringt immer den "Unknown runtime error" (?!?).
cloneNode() ist nicht so klasse, da ohnehin so ziemlich alles anders ist (anderer Name, andere Größe, andere onBlur-Funktion für jedes INPUT-Feld).

Erzeuge die Sonderzeichen alternativ so (als Teilstring behandeln):
euro=String.fromCharCode(8364);

Super! Das klappt wunderbar. Danke!

Der Yeti

[Thomas Meinike]

Hallo,

innerHTML bringt immer den "Unknown runtime error" (?!?).

Kann ich ohne Code nicht nachvollziehen.

cloneNode() ist nicht so klasse, da ohnehin so ziemlich alles anders ist (anderer Name, andere Größe, andere onBlur-Funktion für jedes INPUT-Feld).

Deine (unbekannten) 37 Zeilen kann ich ohne große Optimierungsversuche auf 25 verringern:

var row,col;
row=document.createElement("tr");
for(i=0;i<5;i++)row.appendChild(document.createElement("td"));
col=row.document.getElementsByTagName("td");
col[0].appendChild(document.createTextNode("1."));
col[1].appendChild(document.createElement("input"));
col[1].firstChild.setAttribute("type","text");
col[1].firstChild.setAttribute("name","menge[1]");
col[1].firstChild.setAttribute("size","3");
col[2].appendChild(document.createElement("input"));
col[2].firstChild.setAttribute("type","text");
col[2].firstChild.setAttribute("name","produkt[1]");
col[2].firstChild.setAttribute("size","20");
col[3].appendChild(document.createElement("input"));
col[3].firstChild.setAttribute("type","text");
col[3].firstChild.setAttribute("name","einzelpreis[1]");
col[3].firstChild.setAttribute("size","5");
col[3].firstChild.setAttribute("onblur",function(){calcRech();displaynext(1);});
col[3].appendChild(document.createTextNode(" "+String.fromCharCode(8364)));
col[4].appendChild(document.createElement("span"));
col[4].firstChild.setAttribute("id","gesamtpreis1");
col[4].firstChild.setAttribute("name","produkt[1]");
col[4].firstChild.appendChild(document.createTextNode("0,00"))
col[4].appendChild(document.createTextNode(" "+String.fromCharCode(8364)));
document.getElementById("rechnungsposten").getElementsByTagName("tbody")[0].appendChild(row);

MfG, Thomas

[Yeti]

Hi,

Kann ich ohne Code nicht nachvollziehen.

Bitteschön:
document.getElementById("rechnungsposten").getElementsByTagName("tbody")[0].innerHTML += "<tr><td>Test</td></tr>";
HTML-Code immer noch wie oben.
Mit DIVs und Ps klappt es wunderbar, nur beim TABLE bzw. TBODY kommt der runtime error.

Deine (unbekannten) 37 Zeilen kann ich ohne große Optimierungsversuche auf 25 verringern:
[...]

OK, das spart den ganzen Teil mit den temporären Variablen und ...
newRow.appendChild(newNrCell);
newRow.appendChild(newMengeCell);
newRow.appendChild(newProduktCell);
newRow.appendChild(newEinzprCell);
newRow.appendChild(newGesprCell);
rechTable.appendChild(newRow);

Der Yeti

[Thomas Meinike]

Hallo,

Bitteschön:
document.getElementById("rechnungsposten").getElementsByTagName("tbody")[0].innerHTML += "<tr><td>Test</td></tr>";
HTML-Code immer noch wie oben.
Mit DIVs und Ps klappt es wunderbar, nur beim TABLE bzw. TBODY kommt der runtime error.

Achja, das ist 'ne IE-Spezifik. Man braucht hier insertRow() und insertCell(), siehe die "Remarks" unter: http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp.

MfG, Thomas

[Yeti]

Hi,

Achja, das ist 'ne IE-Spezifik. Man braucht hier insertRow() und insertCell(), siehe die "Remarks" unter: http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp.

Ärghs. Danke!
Warum steht das nicht bei SelfHTML dabei?! Naja, vielleicht bei 8.1. ;)

Der Yeti