QBoy: Insert IM Code

Hi

Ich habe auf meiner Seite eine Tabelle. Immer wenn man auf einen Button drückt, soll eine neue Zeile angefügt werden. Also muss ich zwichen dem letzten </tr> und den </table> element Code einfügen.

Wie kann ich das machen?

Thx, QBoy

  1. Hi

    Ich habe auf meiner Seite eine Tabelle. Immer wenn man auf einen Button drückt, soll eine neue Zeile angefügt werden. Also muss ich zwichen dem letzten </tr> und den </table> element Code einfügen.

    Wie kann ich das machen?

    Mit DOM. Stichwort addNode();

    Fabian

    1. Hallo,

      Wie kann ich das machen?
      Mit DOM. Stichwort addNode();

      Kennen Deine Browser eine solche Methode?

      Hier sind eher createElement(), createTextNode() und appendChild() gefragt.

      MfG, Thomas

      --
      "Sind wir eins? - Wir sind zwei. - Ich bin drei!" [Project Pitchfork - Trialog]
      1. Hi!

        Ich habs mal ausprobiert, aber irgenwie funzt das net so ganz...

        Also das is mein Code:

        <html>
         <head>
          <title>Test</title></head>
           <script type="text/javascript"><!--
             function AddRow(tab, content) {
               var TabElem = document.getElementById(tab);

        var NewRow = document.createElement("tr")
               var NewRowContent = document.createElement("td");
               var NewRowContent_Text = document.createTextNode(content);

        NewRowContent.appendChild(NewRowContent_Text);
               NewRow.appendChild(NewRowContent);
               TabElem.appendChild(NewRow);
             }
           --></script>
         </head>
         <body>
          <table border="1" id="einetabelle">
           <tr><td>Eine Zeile</td></tr>
           <tr><td>Eine weitere Zeile</td></tr>
          </table>

        <input type="button" onclick="AddRow('einetabelle','Zeileninhalt');" value="Add">
         </body>
        </html>

        Wenn ich auf den Button Klicke, passiert nix. Kein Fehler, gar kein nix.

        Ich hab mich mit den Node-Elemente noch nie zuvor beschäftigt. Also, kann mir jemand helfen?

        Thx, QBoy

        1. Hallo,

          Wenn ich auf den Button Klicke, passiert nix. Kein Fehler, gar kein nix.

          1. Du hast formal (fast) nichts falsch gemacht, aber hier ist (fuer den IE) wieder einmal der "outerHTML-Hack" noetig.

          2. Außerdem klappt das nicht ganz richtig mit Mozilla, weil dort strenger vorgegangen wird: Table-Rows sind Kindelemente von tbody. Hinzu kommt noch das Erfordernis von display="table-row", sonst sehen die neuen Reihen/Zellen im Tabellenkontext merkwuerdig aus.

          Ich habe beides mal Deinem Code hinzugefuegt:

          <script type="text/javascript"><!--
               function AddRow(tab, content) {
                 var TabElem = document.getElementById(tab);

          var NewRow = document.createElement("tr");
              if(NewRow.style.display)NewRow.style.display="table-row";
                 var NewRowContent = document.createElement("td");
              if(NewRowContent.style.display)NewRowContent.style.display="table-cell";
                 var NewRowContent_Text = document.createTextNode(content);

          NewRowContent.appendChild(NewRowContent_Text);
                 NewRow.appendChild(NewRowContent);
                 TabElem.getElementsByTagName("tbody")[0].appendChild(NewRow);

          if(document.getElementById(tab).outerHTML)document.getElementById(tab).outerHTML=document.getElementById(tab).outerHTML;
               }
             --></script>

          MfG, Thomas

          1. Das mit dem OuterHTML geht nicht. Ich hab in der Tabelle Textfelder und immer wenn die outerHTML-Geschichte kommt, werden die Textfelder geleert. Aber im IE6.0 gehts auch ohne das wunderbar.

            1. Hallo,

              Das mit dem OuterHTML geht nicht. Ich hab in der Tabelle Textfelder und immer wenn die outerHTML-Geschichte kommt, werden die Textfelder geleert. Aber im IE6.0 gehts auch ohne das wunderbar.

              Ich habe den Code von "QBoy" mit dem IE 5.5 getestet und da funktionierte sein Code erst mit outerHTML. Nun nochmal mit dem IE 6 und es funktioniert mit/ohne outerHTML.

              Bei Deinem Problem hilft vielleicht die Verlagerung des form-Elements.

              MfG, Thomas

              1. Wohin soll ich das Element denn verlagern?

                1. Hallo,

                  Wohin soll ich das Element denn verlagern?

                  Wie sieht der Code denn bisher aus?

                  MfG, Thomas

      2. Hi Thomas,

        Wie kann ich das machen?
        Mit DOM. Stichwort addNode();
        Kennen Deine Browser eine solche Methode?

        Hier sind eher createElement(), createTextNode() und appendChild() gefragt.

        Klar. *In die Ecke stell*
        Habe heute so viel mit Substrings und innerHTMl gebastelt, dass ich glatt dieses addNode (so heißt eine von mir zur Vereinfachung gebastelte Hüllfunktion) geantwortet habe. Nix für ungut ;-)

        Fabian