DOM- Manipulation mit Javascript

[maddin]

Hi,

ich versuch gerade mit Javascript den folgenden Html-Code

<div class="form">

    <table>

        <tr>

            <td><img src="img/form.topleft.png" style="width:5px; height:30px;" alt="" /></td>

            <td><img src="img/form.top.png" style="width:900px; height:30px;" alt="" /></td>

            <td><img src="img/form.topright.png" style="width:5px; height:30px;" alt="" /></td>

        </tr>

        <tr>

            <td><img src="img/form.left.png" style="width:5px; height:700px;" alt="" /></td>

            <td><img src="img/form.bkgnd.png" style="width:900px; height:700px;" alt="" /></td>

            <td><img src="img/form.right.png" style="width:5px; height:700px;" alt="" /></td>

        </tr>

        <tr>

            <td><img src="img/form.bottomleft.png" style="width:5; height:35px;" alt="" /></td>

            <td><img src="img/form.bottom.png" style="width:900px; height:35px;" alt="" /></td>

            <td><img src="img/form.bottomright.png" style="width:5px; height:35px;" alt="" /></td>

        </tr>

    </table>

</div>

in ein bestehendes Dokument einzufügen. Mein jetziger Code ist der Folgende:

var a = new Array();

a[0] = new Array();

a[0][0] = new Array("img/form.topleft.png", "5px", "30px");

a[0][1] = new Array("img/form.top.png", cx + "px", "30px");

a[0][2] = new Array("img/form.topright.png", "5px", "30px");

a[1] = new Array();

a[1][0] = new Array("img/form.left.png", "5px", cy + "px");

a[1][1] = new Array("img/form.bkgnd.png", cx + "px", cy + "px");

a[1][2] = new Array("img/form.right.png", "5px", cy + "px");

a[2] = new Array();

a[2][0] = new Array("img/form.bottomleft.png", "5px", "35px");

a[2][1] = new Array("img/form.bottom.png", cx + "px", "35px");

a[2][2] = new Array("img/form.bottomright.png", "5px", "35px");


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

for(var i = 0; i < 3; i++) {

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

    tbl.appendChild(tr);

    for(var k = 0; k < 3; k++) {

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

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

        img.setAttribute("src", a[i][k][0]);

        img.setAttribute("style", "width:" + a[i][k][1] + "; height:" + a[i][k][2] + ";");

        td.appendChild(img);

        tr.appendChild(td);

    }

}

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

div.setAttribute("class", "form");

div.appendChild(tbl);

document.getElementsByTagName("body")[0].appendChild(div);

Das ganze läuft unter Firefox auch einwandfrei. Unter IE 7 aber nicht. Und genau da liegt mein Problem. Ist irgendwas an meinem Code falsch, fehlt etwas oder liegt das an einer Einstellung im IE?

[geloescht_JesterDay]

Das ganze läuft unter Firefox auch einwandfrei. Unter IE 7 aber nicht. Und genau da liegt mein Problem. Ist irgendwas an meinem Code falsch, fehlt etwas oder liegt das an einer Einstellung im IE?

Beim IE musst du AFAIR die Tabelle falschrum aufbauen, sprich von innen anfangen. Die TDs hängst du erst an das TR, dann hängst du das TR an den TableBody.

Hier mal ein Auszug aus der entspr. Funktion von mir:

  // Grundelemente der Tabelle erzeugen

  var myTable = document.createElement("TABLE");

  var myTableBody = document.createElement("TBODY");

  var myTableHead = document.createElement("THEAD");

...

  var myHeader = document.createElement("TR");

...

  myCell = document.createElement("TH");

  myCell.appendChild(document.createTextNode(arHeader[i]));

  myHeader.appendChild(myCell);

...

  myTableHead.appendChild(myHeader);

  myTable.appendChild(myTableHead);

...

  myRow = document.createElement("TR");

...

  var myCell = document.createElement("TD");

...

  myCell.appendChild(document.createTextNode(myContent));

...

  myRow.appendChild(myCell);

...

  myTableBody.appendChild(myRow);

...

  myTable.appendChild(myTableBody);

Das ganze war eine funktion, die aus übergebenen Arrays eine Tabelle aufgebaut hat (deswegen ist es was zerstückelt, aber auch nur die entscheidenden Teile).

Das funktioniert sorum auch im FF/Oopera (umgekehrt aber nicht im IE)

[maddin]

Jo, super läuft.

...

Wäre ja auch langweilig, wenn man sich mal auf Standards einigen und auch noch daran halten würde.