AK-Palme: Node-Tabelle im IE

Hi,
ich versuche eine Tabelle mit dem DOM-Objekt zu erstellen. FF und Opera spielen da auch mit, nur der IE macht Probleme. Es gibt keine Fehler, etc. Das Script läuft durch, nur es gibt keine Tabelle.

Hat jemand eine Idee, was daran nicht funktionieren könnte und warum?

-----------------
<html>
<head>
<script language="javascript">
 function createTable(){
  var col;
  var row;

for(var y = 0; y < 10; y++){
   col = document.createElement("tr");
   for(var x = 0; x < 10; x++){
    row = document.createElement("td");
    row.style.width = 50;
    row.style.height = 50;
    row.style.textAlign = 'center';
    row.innerHTML = x + '/' + y;
    col.appendChild(row);
   }
   document.getElementById('t').appendChild(col);
   document.getElementById('b').value = 'ok';
  }
 }
</script>
</head>
<body>
<input type="button" id="b" onclick="createTable();">
<table border="1" id="t"></table>
</body>
</html>
----------------

Danke,
AK-Palme

  1. Hello,

    Hat jemand eine Idee, was daran nicht funktionieren könnte und warum?

    ja: im Internet Explorer ist tr nicht unmittelbares Kind von table, stattdessen fehlt dazwischen thead, tbody, tfoot oder was dir sonst noch so einfällt. (SELFHTML: Aufbau einer Tabelle)

    Ganz generell kannst du dir einiges an Arbeit sparen, wenn du dich der DOM-Methoden für Tabellen bedienst, siehe z.B. Beschreibung in der MSDN-Library.

    MfG
    Rouven

    --
    -------------------
    He is entertaining both out of the car and in the car because if you tell him that a corner is almost flat then he is the guy who is going to try to take it flat even if it means shunting it the other side of it, he will come with the data and say 'hey, I may have crashed and destroyed the car, but I was flat-out'. That is an interesting quality that he has!  --  Team Member on Jacques Villeneuve
    1. Hi,

      ja: im Internet Explorer ist tr nicht unmittelbares Kind von table, stattdessen fehlt dazwischen thead, tbody, tfoot oder was dir sonst noch so einfällt. (SELFHTML: Aufbau einer Tabelle)

      Das wars :)
      Hier der aktuelle Code fürs Archiv:
      ----------
       function createTable(){
        var col;
        var row;
        var tbody;

      tbody = document.createElement("tbody");
        for(var y = 0; y < 10; y++){
         col = document.createElement("tr");
         for(var x = 0; x < 10; x++){
          row = document.createElement("td");
          row.style.width = 50;
          row.style.height = 50;
          row.style.textAlign = 'center';
          row.innerHTML = x + '/' + y;
          col.appendChild(row);
         }
         tbody.appendChild(col);
         document.getElementById('b').value = 'ok';
        }
        if (document.getElementById('t').getElementsByTagName("tbody").length > 0) document.getElementById('t').removeChild(document.getElementById('t').getElementsByTagName("tbody")[0]);
        document.getElementById('t').appendChild(tbody);
       }
      ------------

      Ganz generell kannst du dir einiges an Arbeit sparen, wenn du dich der DOM-Methoden für Tabellen bedienst, siehe z.B. Beschreibung in der MSDN-Library.

      Ich erstelle nicht mehr als soeine Matrix, das ist mit der Methoden schon getan. Da möchte ich mich nicht auf noch was spezielleres einlassen :)
      Aber danke für den Tipp

      AK-Palme

  2. Hallo,

    Zusätzlich zum dem, was Rouven dir bereits gesagt hat (also dass „tbody“ fehlt):

    <html>
    <head>
    <script language="javascript">

    Hier fehlt das vorgeschriebene type-Attribut. „language“ kannst du dagegen weglassen.

    function createTable(){
      var col;
      var row;

    for(var y = 0; y < 10; y++){

    Das ist zwar nicht falsch aber zumindest nicht üblich. Für for-Schleifen verwendet man i.d.R. Buchstaben ab „i“. Das machst ein Script für andere überschaubarer.

    col = document.createElement("tr");
       for(var x = 0; x < 10; x++){
        row = document.createElement("td");
        row.style.width = 50;

    Da du hier mit Stylesheets arbeitest, MUSST du auch eine Maßeinheit mit angeben.

    row.style.height = 50;
        row.style.textAlign = 'center';
        row.innerHTML = x + '/' + y;

    Wozu „innerHTML“, wenn du nur blanken Text einfügen willst? Nimm lieber das hier:

    row.appendChild(document.createTextNode(x + '/' + y));

    document.getElementById('t').appendChild(col);

    <input type="button" id="b" onclick="createTable();">
    <table border="1" id="t"></table>

    Du musst die Tabelle nicht vorher schon im Quelltext haben. Erstelle lieber ein Objekt, das die gesamte Tabelle enthält.

    Hier mal meine Version deines Scriptes:

      
    function createTable(Button){  
     var Tabelle = document.createElement("table");  
     Tabelle.border = "1";  
     Tabelle.appendChild(document.createElement("tbody"));  
      
     with (Tabelle.firstChild){ //um die Tabelle nicht jedesmal neu referenzieren zu müssen  
      for (var i = 0; i < 10; i++){  
       appendChild(document.createElement("tr")); //Tabellenzeile anhängen  
       for (var j = 0; j < 10; j++){  
        lastChild.appendChild(document.createElement("td")); //Tabellenzelle anhängen  
        with (lastChild.lastChild){ //Alle weiteren Anweisungen auf die Tabellenzelle anwenden  
         appendChild(document.createTextNode(i + "/" + j)); //Text einfügen  
         style.width = "50px";  
         style.height = "50px";  
         style.textAlign = "center";  
        }  
       }  
      }  
     }  
    document.body.appendChild(Tabelle); //alternativ könntest du auch insertBefore verwenden  
    Button.value = "OK";  
    }  
    
    

    Dein HTML-Body könnte dann so aussehen:

      
    <body>  
    <input type="button" onclick="createTable(this);">  
    </body>  
    
    

    Ich hoffe, die vielen „http://de.selfhtml.org/javascript/sprache/objekte.htm#with@title=with“-Abkürzungen sind jetzt nicht zu verwirrend.

    mfg. Daniel

    1. Hi,

      Das ist zwar nicht falsch aber zumindest nicht üblich. Für for-Schleifen verwendet man i.d.R. Buchstaben ab „i“. Das machst ein Script für andere überschaubarer.

      Wesentlich verwirrender als das y als Schleifenvariable finde ich, daß

      col = document.createElement("tr");

      die Variable namens col(umn) eine table-row enthält,
      wohingegen

      row = document.createElement("td");

      die Variable namens row eine Tabellenzelle (also gewissermaßen eine col(umn)) enthält ...

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      Schreinerei Waechter
      O o ostern ...
      Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.