DOM: Internet Explorer weigert sich

[Pinki-)]

Hallo Leute,

ich bin beim programmieren mit js und alles ist in Ordnung, in FireFox und Opera akzeptieren den Code, aber der IE weigert sich.
auch als ich es für den ie es mit innerHTML schreiben wollte weigert er sich. (home bezieht sich auf eine id in 'tbody' in einer Tabelle in einem andern Fenster; variablen: name = array, id = string)
hier der Quelltext (bisschen viel):
 // in 'home' wird der Ausgangspfad gespeichert
 var home = parent.document.getElementById('Teilnehmerliste');

try
 {
   // das 'tr'-Element wird erstellt
   var tr = document.createElement("tr");
   // die Klasse wird auf gerade oder ungerade eingestellt
   if (home.getElementsByTagName('tr').length%2 == 0) tr.setAttribute("class", "even"); else tr.setAttribute("class", "uneven");
    // das erste 'td'-Element wird erstellt und das style-Attribut
    var td = document.createElement("td");
    td.setAttribute("style", "text-align: center; margin: 2px;");
     // die Checkbox im ersten 'td'
     var input = document.createElement("input");
     input.setAttribute("type", "Checkbox");
     input.setAttribute("name", "action[]");
     input.setAttribute("value", id);
     input.setAttribute("onClick", "checked_checkbox(this);");
     // einfügen der Checkbox ins 'td'-Element
     td.appendChild(input);

// Neues 'input'-Feld für die Id
     var input = document.createElement("input");
     input.setAttribute("type", "hidden");
     input.setAttribute("name", "id[]");
     input.setAttribute("value", id);
     // einfügen des 'input'-Feldes ins 'td'-Element
     td.appendChild(input);
    // einfügen des 'td'-Elementes ins 'tr'-Element
    tr.appendChild(td);

// die Anderen 'td'-Element werden erstellt und deren Inhalte
    for (i=0; i<name.length; i++)
    {
     var td = document.createElement("td");
      // das Text Feld wirderstellt
      var input = document.createElement("input");
      input.setAttribute("onMouseOver", "textCursor(true, event);");
      input.setAttribute("onMouseMove", "textCursor(true, event);");
      input.setAttribute("onMouseOut", "textCursor(false);");
      input.setAttribute("class", "Text");
      input.setAttribute("type", "Text");
      input.setAttribute("name", name[i]+"-"+id);
      input.setAttribute("value", value[i]);
      input.setAttribute("maxlength", "255");
      // Einfügen des 'input'-Elements in das 'td'-Elements
      td.appendChild(input);
     // Einfügen des 'td'-Elements in das 'tr'-Elements
     tr.appendChild(td);
    }
   // Einfügen des 'tr'-Elements in die Tabelle
   home.appendChild(tr);
 }
 catch (e)
 {
  if (home.getElementsByTagName('tr').length%2 == 0)
   a = "even";
  else
   a = "uneven";
  txt = "\n\t\t<tr class="" + a + "">";
  txt += "\n\t\t\t" +  '<td style="text-align: center; margin: 2px;"><input type="Checkbox" name="action[]" value="' + id + '" onClick="checked_checkbox(this);"><input type="hidden" name="id[]" value="' + id + '"></td>';
  for (i=0; i<name.length; i++)
   txt += "\n\t\t\t" +  '<td><input onMouseOver="textCursor(true, event);" onMouseMove="textCursor(true, event);" onMouseOut="textCursor(false);" class="Text" type="Text" name="' + name[i] + '-' + id + '" value="' + value[i] + '" maxlength="255"></td>';
  txt += "\n\t\t</tr>";
  home.innerHTML += txt;
 }

kann mir jemand sagen was falsch ist?

Danke

[Struppi]

kann mir jemand sagen was falsch ist?

Vergiss einfach die Funktion setAttribute wieder. weise die Attribute direkt zu

Struppi.

[flashnfantasy]

Sind mehrere Sachen mir ein wenig dubios:

1. benutze className statt setAttribute

tr.className = (home.getElementsByTagName('tr').length%2 == 0)?"even":odd;

2. benutze style statt setAttribute

td.style.textAlign = "center";

3. verwende keine Variablenbezeichner, die HTML-Tags sind !

4. eine Funktion für Eventhandler, die klappt (fn ist die Callback-Funktion):

function addEvent(obj, evType, fn) {
  if (obj.addEventListener)
  {
    obj.addEventListener(evType, fn, false);
    return true;
  }
  else if (obj.attachEvent)
  {
     var r = obj.attachEvent("on"+evType, fn);
     return r;
  }
  else
  {
    return false;
  }
}

5. Vermeide innerHTML, arbeite komplett auf DOM

6. So sieht das Erzeugen eines Input-Knotens aus:

function domInput(doc,text,parent,className)
{
  var erg = doc.createElement("input");
  if (parent != undefined) parent.appendChild(erg);
  if (className != undefined) erg.className = className;
  erg.defaultValue = text;
  erg.value = text;
  return erg;
}

7. Wahrscheinlich versuchst du das TR-Element direkt in die Tabelle einzuhängen, das ist unsauber, oder sogar falsch, die Tabelle hat ein Unterelement TBODY, das du verwenden musst.

Soweit erstmal

Gruß Flashnfantasy

[JürgenB]

Hallo Pinki,

var home = parent.document.getElementById('Teilnehmerliste');

...

// Einfügen des 'tr'-Elements in die Tabelle
   home.appendChild(tr);

wenn home auf die Tabelle zeigt, liegt Dein Problem darin, dass die tr Kinder des tbody sind und nicht des table.

Gruß, Jürgen

PS Wozu brauchst Du denn cry - catch?

[wahsaga]

hi,

auch als ich es für den ie es mit innerHTML schreiben wollte weigert er sich. (home bezieht sich auf eine id in 'tbody' in einer Tabelle

innerHTML ist im IE für fast alle Tabellenelemente (ausser TD) read-only.
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp

gruß,
wahsaga

[MudGuard]

Hi,

var home = parent.document.getElementById('Teilnehmerliste');
   var tr = document.createElement("tr");

[...]

home.appendChild(tr);

Meines Wissens hat der IE Probleme, wenn Elemente in einem Dokument erzeugt, aber in einem anderen Dokument eingefügt werden.

Daß Du die Attribute besser direkt ansprichst (input.type = ...) wurde ja schon erwähnt.
Zusätzlich noch der Hinweis: in den Eventhandlern dürfen sich dann keine Großbuchstaben befinden, also input.onmouseover, nicht input.onMouseOver.

cu,
Andreas