probleme mit dynamischer tabelle

[tufan]

hallo..

Ich habe eine Tabelle, die ich mit JS dynamisch erweitern möchte. Es klappt auch mit dem IE problemlos, FireFox jedoch macht Probleme, bzw. sie tut gar nichts. Die Fehlermeldung lautet:

Fehler: uncaught exception: [Exception... "String contains an invalid character"  code: "5" nsresult: "0x80530005 (NS_ERROR_DOM_INVALID_CHARACTER_ERR)"  location: "http://www.disco-simarik.de/(...) Line: 16"]

Die Seitenkodierung:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

Der Skript:

  
<script language="javascript" type="text/javascript">  
var Zeile = 1;  
function addRow()  
{  
 Zeile += 1;  
 var TR = document.getElementById("Tabelle").insertRow(Zeile);  
 var TD1 = document.createElement("td");  
 TD1.setAttribute("align","center");  
 TD1.setAttribute("valign","middle");  
  
// folgende Zeile ist die oben angegebene Zeile 16:  
 var TD1textfeld1 = document.createElement("<input name='pos' type='radio' id='pos' size='3'>");  
 TD1.appendChild(TD1textfeld1);  
  
 var TD2 = document.createElement("td");  
 var TD2textfeld2 = document.createElement("<input type='file' name='fotos"+Zeile+"' id='bild1"+Zeile+"' accept='image/jpeg,image/gif' size='30' class='input'>");  
    TD2.appendChild(TD2textfeld2);  
  
 var TD3 = document.createElement("td");  
 var TD3textfeld3 = document.createElement("<input type='text'  name='width[]' value='500' class='input' style='width: 50px; font-face: Verdana; font-size: 9pt;'>");  
 TD3.appendChild(TD3textfeld3);  
 var TD3text = document.createTextNode(" × ");  
 TD3.appendChild(TD3text);  
 var TD3textfeld4 = document.createElement("<input type='text'  name='height[]' value='auto' class='input' style='width: 50px; font-face: Verdana; font-size: 9pt; font-weight: normal;'>");  
 TD3.appendChild(TD3textfeld4);  
  
 var TD4 = document.createElement("td");  
 var TD4textfeld4 = document.createElement("<input type='text'  name='strokewidth[]' value='1' class='input' style='width: 30px; font-face: Verdana; font-size: 9pt;'>");  
 TD4.appendChild(TD4textfeld4);  
 var TD4text = document.createTextNode(" px # ");  
 TD4.appendChild(TD4text);  
 var TD4textfeld4 = document.createElement("<input type='text'  name='strokecolor[]' value='FFFFFF' class='input' style='width: 70px; font-face: Verdana; font-size: 9pt; font-weight: normal;'>");  
 TD4.appendChild(TD4textfeld4);  
   TR.appendChild(TD1);  
 TR.appendChild(TD2);  
   TR.appendChild(TD3);  
   TR.appendChild(TD4);  
  
}  
</script>  

...und der Aufruf:

  
<A href="javascript:addRow();"><IMG height=20 src="icons/bild_neu.gif" width=108 align=absMiddle border=0></A>  

Könnte jemand mir sagen, was ich nicht beachtet habe, so dass dieser Skript bei FireFox Probleme gemacht hat ?
Vielen Dank im Voraus,

grüsse,

tufi

[Siechfred]

Tag tufan.

Fehler: uncaught exception: [Exception... "String contains an invalid character"  code: "5" nsresult: "0x80530005 (NS_ERROR_DOM_INVALID_CHARACTER_ERR)"  location: "http://www.disco-simarik.de/(...) Line: 16"]

Du hast ein Zeichen verwendet, das da nicht hingehört, das sollte klar sein.

// folgende Zeile ist die oben angegebene Zeile 16:
var TD1textfeld1 = document.createElement("<input name='pos' type='radio' id='pos' size='3'>");

Du denkst doch nicht allen Ernstes, dass dein String ein gültiges HTML-Element ist? Falls doch, schau dir bitte mal die Referenz zu createElement an: Zuerst musst du das Element (in deinem Fall "input") erzeugen, erst dann kannst du es mit den entsprechenden Attributen schmücken (siehe HTML-Element input).

Siechfred

[tufan]

Tag tufan.

hallo wieder..

Du hast ein Zeichen verwendet, das da nicht hingehört, das sollte klar sein.

jepp, nach ein bisschen googlen, habe ich herausgefunden, dass diese Fehlermeldung kommt, wenn ein verwendetes Zeichen nicht in die HTML-Zeichenkodierung passt, zB bei best. Unicode-Zeichen. Dürfte hier nicht der Fall sein oder?

Zuerst musst du das Element (in deinem Fall "input") erzeugen, erst dann kannst du es mit den entsprechenden Attributen schmücken (siehe HTML-Element input).

wie ich das mit den Attributen schmücken soll war mir nicht ganz klar; deswegen die Frage, ist folgender Code richtig ?

  
 var TD1textfeld1 = document.createElement("input");  
 var inputType = document.createAttribute("type");  
 inputType.nodeValue = "radio";  
 TD1textfeld1.setAttributeNode(inputType);  
 var inputName = document.createAttribute("name");  
 inputName.nodeValue = "pos";  
 TD1textfeld1.setAttributeNode(inputName);  
 var inputID = document.createAttribute("id");  
 inputID.nodeValue="pos";  
 TD1textfeld1.setAttributeNode(inputID);  
 var inputSize = document.createAttribute("size");  
 inputSize.nodeValue="3";  
 TD1textfeld1.setAttributeNode(inputSize);  

danke..

tufan

[Siechfred]

jepp, nach ein bisschen googlen, habe ich herausgefunden, dass diese Fehlermeldung kommt, wenn ein verwendetes Zeichen nicht in die HTML-Zeichenkodierung passt, zB bei best. Unicode-Zeichen. Dürfte hier nicht der Fall sein oder?

Ja, aber welches Zeichen das hier ist, mag ich jetzt nicht raten :-)

ist folgender Code richtig ?

var TD1textfeld1 = document.createElement("input");
var inputType = document.createAttribute("type");
inputType.nodeValue = "radio";
TD1textfeld1.setAttributeNode(inputType);
var inputName = document.createAttribute("name");
inputName.nodeValue = "pos";
TD1textfeld1.setAttributeNode(inputName);
var inputID = document.createAttribute("id");
inputID.nodeValue="pos";
TD1textfeld1.setAttributeNode(inputID);
var inputSize = document.createAttribute("size");
inputSize.nodeValue="3";
TD1textfeld1.setAttributeNode(inputSize);

  
Grundsätzlich ja, einfacher ginge es mit der direkten Zuweisung:  
  
~~~javascript
var TD1textfeld1 = document.createElement("input");  
TD1textfeld1.type = "radio";  
TD1textfeld1.name = "pos";  
TD1textfeld1.id = "pos";  
TD1textfeld1.size = "3";

"TD1Textfeld1" enthält bereits eine Referenz auf ein HTML-Objekt "input", daher kannst du auch ohne den Umweg setAttribute alle Eigenschaften dieses Objektes ansprechen. Das Ganze noch in den Dokumentenbaum eingehängt, fertig.

Siechfred

[tufan]

"TD1Textfeld1" enthält bereits eine Referenz auf ein HTML-Objekt "input", daher kannst du auch ohne den Umweg setAttribute alle Eigenschaften dieses Objektes ansprechen. Das Ganze noch in den Dokumentenbaum eingehängt, fertig.

danke es hat funktioniert. aber...
jetzt funktioniert es beim FireFox problemlos; aber im IE nicht :-S
gibt's denn eine Möglichkeit, so etwas bei beiden Browsern zum Laufen zu bringen ?

[tufan]

gibt's denn eine Möglichkeit, so etwas bei beiden Browsern zum Laufen zu bringen ?

wenn ich input direkt anspreche, wie du gesagt hast, kommt IE damit irgendwie nicht klar.. deswegen habe ich mir doch die Tipparbeit gegönnt.
Danke für die Hilfestellung.

Grüsse aus Berlin,

tufan

[Struppi]

gibt's denn eine Möglichkeit, so etwas bei beiden Browsern zum Laufen zu bringen ?

wenn ich input direkt anspreche, wie du gesagt hast, kommt IE damit irgendwie nicht klar.. deswegen habe ich mir doch die Tipparbeit gegönnt.
Danke für die Hilfestellung.

Eigentlich hat eher der IE Probleme mit get... und setAttribute und ist zufrieden damit wenn du die Elementeigenschaften direkt ansprichst. Aber er baut die Tabelen anders zusammen als andere Browser, allerdings läßt sich das ganze jetzt nicht ohne konkretes Beispiel wo man sieht was falsch läuft zeigen.

Struppi.

[derletztekick]

Hallo tufan,

document.createElement("<input type='file' name='fotos"+Zeile+"' id='bild1"+Zeile+"' accept='image/jpeg,image/gif' size='30' class='input'>");

Schau Dir mal createElement() genau an. Das, was Du da alles machst, ist afaik so nicht zulässig

Mit freundlichem Gruß
Micha