KitCat: Tabelle dynamisch erzeugen

Ich schon wieder :-)
Gibt es eine Möglichkeit, Tabellen dynamisch per JS zu erzeugen/erweitern? Alles was ich mit createElement("tr") und ("td") versuche klappt nicht :-( Ein miniBeispiel wäre super!
Meine Ausgangssituation ist einfach ein <table id="Tabelle"></table>. Habe dann versucht ein tr zu erzeugen und mit appendChild anzuhängen und dann ein td zu erzeugen und das ans tr zu hängen. Anschließend wollte ich ein TextNode an das td zu hängen. Klappt alles nicht... Jedenfalls nicht im IE...

Gruß, KitCat

  1. Hi,

    Gibt es eine Möglichkeit, Tabellen dynamisch per JS zu erzeugen/erweitern?

    natürlich.

    Alles was ich mit createElement("tr") und ("td") versuche klappt nicht :-(

    Was versuchst Du denn, und was bedeutet jeweils "klappt nicht"?

    Ein miniBeispiel wäre super!

    Nein, Lösungen poste ich nicht, die schaden nur.

    Meine Ausgangssituation ist einfach ein <table id="Tabelle"></table>. Habe dann versucht ein tr zu erzeugen und mit appendChild anzuhängen

    An die Tabelle, oder an den in der Tabelle enthaltenen <tbody>?

    Klappt alles nicht... Jedenfalls nicht im IE...

    Und in einem richtigen Browser?

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Was versuchst Du denn, und was bedeutet jeweils "klappt nicht"?

      <html><head><title>Test</title></head>
      <body>

      <table id="Tabelle" border="1">
      </table>
      <script type="text/javascript">
      var liNummer = 0;

      function insert(){
       liNummer++;
       var newTR = document.createElement("tr");
       newTR.id = "tr"+liNummer;
       document.getElementById("Tabelle").appendChild(newTR);

      var newTD = document.createElement("td");
       newTD.id = "td"+liNummer;
       newTR.appendChild(newTD);

      var newTDText = document.createTextNode('Das ist Tabelleneintrag Nummer ' + liNummer);
       newTD.appendChild(newTDText);

      }

      </script>
      <a href="#" onClick="insert(); return false;">add</a>
      </body></html>

      Ein miniBeispiel wäre super!

      Nein, Lösungen poste ich nicht, die schaden nur.

      schade, hätte mir geholfen...

      Meine Ausgangssituation ist einfach ein <table id="Tabelle"></table>. Habe dann versucht ein tr zu erzeugen und mit appendChild anzuhängen

      An die Tabelle, oder an den in der Tabelle enthaltenen <tbody>?

      siehe oben... hmmm, <tbody> nutz ich gar net :-)

      Klappt alles nicht... Jedenfalls nicht im IE...

      Und in einem richtigen Browser?

      naja, der fox geht, aber ich meine, auch der ie ist ein browser... zumal die netten damen im sekreteriat nur mit dem ie arbeiten muss es damit gehen... grundsatzdiskusionen welcher browser toll ist und welcher nicht brauch ich grad also nicht, da der kunde könig ist und der halt ie nutzt :-)

      gruß, KitCat

      1. Ok, wenn ich

        <table border="1"><tbody id="Tabelle"></tbody></table>

        schreibe geht´s im IE!!!

        Gruß, KitCat

      2. Hi,

        <html><head><title>Test</title></head>

        ist das HTML/4.01, oder was möchtest Du vermitteln? Gib bitte einen hinreichend günstigen DOCTYPE an, und zwar _immer_ - dann verlässt Du auch den Quirks-Mode.

        <table id="Tabelle" border="1">

        Was soll das border-Attribut?

        </script>
        <a href="#" onClick="insert(); return false;">add</a>

        Schreib Dinge, die nur mit JavaScript funktionieren, doch bitte gleich mit JavaScript raus.

        Ein miniBeispiel wäre super!
        Nein, Lösungen poste ich nicht, die schaden nur.
        schade, hätte mir geholfen...

        Nein, hätte Dir geschadet.

        siehe oben... hmmm, <tbody> nutz ich gar net :-)

        Doch, tust Du, sofern das HTML/4.01 ist. Optionale Tags braucht man nicht zu nennen, damit sie da sind. Sie sind ja schließlich optional.

        naja, der fox geht, aber ich meine, auch der ie ist ein browser...

        "Browser" ist die umgangssprachliche Bezeichnung bestimmter HTTP-Clients. Damit etwas als HTTP-Client durchgehen kann, muss es erst einmal HTTP beherrschen. Hier und auch bei praktisch allen anderen Dingen, die man von einem Browser erwartet, versagt der IE so regelmäßig, dass man ihn eigentlich nicht als Browser bezeichnen kann. Zumindest nicht, ohne alle anderen zu beleidigen.

        zumal die netten damen im sekreteriat nur mit dem ie arbeiten muss es damit gehen...

        Aha. Wenn Du einmal Hilfe zu einer Führerscheinprüfung suchst, so erwähne bitte rechtzeitig, dass es um einen Panzerführerschein geht.

        grundsatzdiskusionen welcher browser toll ist und welcher nicht brauch ich grad also nicht,

        Grundsatzdiskussionen darüber, welche Produkte sich zum Testen eignen und welche nicht, unabhängig von dem tatsächlichen Einsatzgebiet, sind keine Grundsatzdiskussionen. Vergiss zunächst einmal den IE. Auch in diesem Fall.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hello out there!

          Optionale Tags braucht man nicht zu nennen, damit sie da sind.

          Doch, denn wenn man sie nicht hinschreibt, dann sind sie eben nicht da. Macht ja auch nichts, denn ...

          Sie sind ja schließlich optional.

          Eben. Du meintest: Optionale Tags braucht man nicht zu nennen, damit _das Element_ da ist?

          Trockenweinbeeren, aber da stehste doch drauf. ;-)

          See ya up the road,
          Gunnar

          --
          “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
      3. Hallo KitCat.

        document.getElementById("Tabelle").appendChild(newTR);

        Hast du dir einmal innerHTML der Tabelle ausgeben lassen?
        Du wirst ein Element vorfinden, was du dort nicht erwartet hast und damit dein Script auch nicht.

        Im Grunde machst du es dir auch viel zu kompliziert; es gibt bereits die für deine Zwecke vorgefertigten Methoden http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#table@title=insertRow und http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#tr@title=insertCell.

        Einen schönen Dienstag noch.

        Gruß, Ashura

        --
        sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
        mathbr:del.icio.us/ mathbr:w00t/
    2. kurzes Beispiel:

      //Attributknoten einfügen (id, class, etc.)
      function addAtribute(tObj, aType, aValue) {
       var tAtt=document.createAttribute(aType);
       tAtt.nodeValue=aValue;
       tObj.setAttributeNode(tAtt);
      }

      var tObj = document.getElementById("tabelle1"); //sei das tabelle1 ein <div id="tabelle1">

      tObj=tObj.appendChild(document.createElement("table"));
      tObj=tObj.appendChild(document.createElement("tbody"));
      for (var i=0; i<zeilen; i++) {
       var tRow=tObj.insertRow(i); //neue Zeile nach der letzten
       addAtribute(tRow, "id", i); //Zeilennummer als Id

      var tCell=tRow.insertCell(0); //neue Spalte bzw. neue Zeile
       tCell=tRow.insertCell(1); //noch ne Zelle hinter der letzten
       tCell.appendChild(document.createTextNode("blabla")); //irgendwas in die letzte Zelle schreiben
      }