Tim: Tabelle dynamisch in Seite einfügen

SELF-Forum

Tabelle dynamisch in Seite einfügen

Tim
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte eine Tabelle in eine Seite einfügen. Problem: Es geht nicht mit write() oder writeln(), da das nur mit leeren Dokumenten funktioniert - die Seite wird bei diesem Vorgang neu angelegt - gelöscht.

Mein Versuch, das mit createElement zu machen und die Elemente an ein div namens "Suchergebnis" anzuhängen hat nicht geklappt. Hier ist die Funktion:

var XTabelle = document.createElement("table");
 var XId = document.createAttribute("id");
  XId.nodeValue = "Artikel";
  XTabelle.setAttributeNode(XId);
 var XBgColor = document.createAttribute("bgcolor");
  XBgColor.nodeValue = "#FFFFFF";
     XTabelle.setAttributeNode(XBgColor);
 var XZeile = document.createElement("tr");
  XTabelle.appendChild(XZeile);
 var XSpalte = document.createElement("td");
  XZeile.appendChild(XSpalte);
 var XAbschnitt = document.createElement("p");
  XSpalte.appendChild(XAbschnitt);
 var XText = document.createTextNode(" ");
  XAbschnitt.appendChild(XText);

var Ausgabebereich = document.getElementById("suchergebnis");
 Ausgabebereich.appendChild(XTabelle);
 Ausgabebereich.appendChild(XZeile);
 Ausgabebereich.appendChild(XSpalte);
 Ausgabebereich.appendChild(XAbschnitt);
 Ausgabebereich.appendChild(XText);

Weiß jemand weiter? Vielen Dank.

Grüße
Tim

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Tabelle dynamisch in Seite einfügen

    Ronny Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    ich möchte eine Tabelle in eine Seite einfügen. Problem: Es geht nicht mit write() oder writeln(), da das nur mit leeren Dokumenten funktioniert - die Seite wird bei diesem Vorgang neu angelegt - gelöscht.

    Zumindest zum ersten Teil Deiner Frage kann ich was sagen.
    Bei folgendem Beispiel wird der Inhalt der aufrufenden Seite nicht überschrieben:

    <!doctype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>test</title>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

    <script type="text/javascript">
    function schreibe() {
    document.open();
    document.writeln("Hallo");
    document.close();
    }
    </script>

    </head>
    <body>
    <p>Ich sage:</p>
    <script type="text/javascript">
    schreibe();
    </script>
    </body>
    </html>

    Grüße,

    Ronny

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Tabelle dynamisch in Seite einfügen

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    var XTabelle = document.createElement("table");
    var XId = document.createAttribute("id");
      XId.nodeValue = "Artikel";
      XTabelle.setAttributeNode(XId);
    var XBgColor = document.createAttribute("bgcolor");
      XBgColor.nodeValue = "#FFFFFF";

    Würd ich eher über CSS lösen ==> class-Attribut, zur Not auch style-Attribut...

    XTabelle.setAttributeNode(XBgColor);

    In HTML 4.01 enthält ein table-Element zwingend ein tbody-Element (auch wenn es im Quelltext nicht immer erscheint - beide tags sind optional).
    Erst darin befinden sich die tr-Elemente.

    var XZeile = document.createElement("tr");
      XTabelle.appendChild(XZeile);
    var XSpalte = document.createElement("td");
       XZeile.appendChild(XSpalte);
      var XAbschnitt = document.createElement("p");
       XSpalte.appendChild(XAbschnitt);
      var XText = document.createTextNode(" ");

    XAbschnitt.appendChild(XText);

    var Ausgabebereich = document.getElementById("suchergebnis");
    Ausgabebereich.appendChild(XTabelle);
    Ausgabebereich.appendChild(XZeile);

    Die tr soll ins div? Die gehört aber ins tbody, welches in table gehört.

    Ausgabebereich.appendChild(XSpalte);

    Die td soll ins div? Die gehört doch ins tr

    Ausgabebereich.appendChild(XAbschnitt);

    Ok, der Absatz darf ins div. Aber der sollte doch in die Zelle, oder?

    Ausgabebereich.appendChild(XText);

    Und der Text darf auch direkt ins div. Aber der sollte doch in den Absatz, oder?

    Was Du erzeugst, sieht grob so aus:
    <div>
    <table bgcolor="#FFFFFF"></table>
    <tr></tr>
    <td></td>
    <p></p>
     
    </div>

    Weiß jemand weiter? Vielen Dank.

    Setze die Kinder da ein, wo sie hingehören, nicht alle ins div.
    Und benutz auch ein tbody.

    cu,
    Andreas

    --
    MudGuard? Siehe http://www.Mud-Guard.de/
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Tabelle dynamisch in Seite einfügen

      Tim
      – Informationen zu den Bewertungsregeln

      Hi Andreas,

      danke nochmal für Deine ausführliche Hilfe. Es klappt jetzt alles. Damit Du siehst, dass ich meine Hausaufgaben gemacht habe:

      var XTabelle = document.createElement("table");
      var XId = document.createAttribute("id");
       XId.nodeValue = "Artikel";
       XTabelle.setAttributeNode(XId);
      var XClass = document.createAttribute("class");
       XClass.nodeValue = "Artikel";
       XTabelle.setAttributeNode(XClass);
      var XTBody = document.createElement("tbody");
       XTabelle.appendChild(XTBody);
      var XZeile = document.createElement("tr");
       XTBody.appendChild(XZeile);
      var XSpalte = document.createElement("td");
       XZeile.appendChild(XSpalte);
      var XAbschnitt = document.createElement("p");
       XSpalte.appendChild(XAbschnitt);
      var XText = document.createTextNode("Test-Text in der Tabellenzelle");
       XAbschnitt.appendChild(XText);

      var Ausgabebereich = document.getElementById("suchergebnis")
       Ausgabebereich.appendChild(XTabelle);
       XTabelle.appendChild(XTBody);
       XTBody.appendChild(XZeile);
       XZeile.appendChild(XSpalte);
       XSpalte.appendChild(XAbschnitt);
       XAbschnitt.appendChild(XText);

      Grüße

      Tim

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln