derletztekick: Darstellungsproblem einer Tabelle im IE (createElement('TABLE');)

Hallo,

Ich habe mal versucht, meinen kleinen Kalender, der bisher mit innerHTML an die entsprechende Stelle in einer Seite gesetzt wurde, via createElement('TABLE'); usw. umzuschreiben. Das ganze Funktioniert(e) auch ganz gut, bis ich mir das Ergebnis im IE mal angesehen habe. Dieser konnte zunächst das onclick nicht auswerten, was ich aber Dank dem Posting von Mathias hinbekommen habe (http://forum.de.selfhtml.org/archiv/2004/6/t82376/)

Das zweite Problem in diesem Browser (sowie auch im Opera 7.54 - die 8ter Version macht es wie gewünscht) ist ein darstellungsproblem.

Ich kann meinen Fehler schlecht beschreiben. Denn, wenn ich die erstellte Tabelle in einen Texteditor ziehe (Word oder dergleichen) kommt sie optimal - ich dachte zunächst, das ich diverse Zellen vergessen habe oder ähnliches, dies scheint aber nicht der Fall zu sein.

Wäre schön, wenn sich das mal einer genau ansehen könnte und mir den vermeindlichen Fehler nennen könnte.
Kalender

Vielen Dank

Mit freundlichem Gruß
Micha

  1. Mal ohne tiefer darauf einzugehen,
    die Table ist erst der Anfang, wie gehst du weiter vor ?

    Hast du daran gedacht, daß das nächste korrekte Element nicht die Zeile (TR) sondern der Tabellenkörper ist ?

    Hier zwei Funktionen + eine Hilfsfunktion in JS, die ich ziemlich häufig für Tabellen nutze...

    function table(parent , className)
    {
      var terg = document.createElement("table");
      if (parent != undefined) parent.appendChild(terg);
      if (className != undefined) terg.className = className;
      var erg = document.createElement("tbody");
      terg.appendChild(erg);
      return erg;
    }

    function tr(parent , className)
    {
      var erg = document.createElement("tr");
      if (parent != undefined)
      {
        if (parent.nodeName == "TABLE") parent = getChildW(parent, "TBODY");
        if (parent != undefined) parent.appendChild(erg);
      }
      if (className != undefined) erg.className = className;
      return erg;
    }

    /*******************************
      Sucht den Unterknoten von einem bestimmten Typ
      Typen werden für gewöhnlich groß geschreiben zb "TR" oder "IMG"
    *******************************/
    function getChildW(node, subNodeName, index)
    {
      if (index==undefined) index = 0;
      j = undefined;
      for (i = 0; i < node.childNodes.length; i++)
      {
        if (node.childNodes[i].nodeName == subNodeName)
        {
          if (index==0) j = node.childNodes[i];
          index--;
        }
      }
      return j;
    }

    1. Hallo,

      »» Mal ohne tiefer darauf einzugehen,

      die Table ist erst der Anfang, wie gehst du weiter vor ?

      var newCalTable = document.createElement('TABLE');

      var newCalTHead = document.createElement('THEAD');
      var newCalTBody = document.createElement('TBODY');
      var newCalRow = document.createElement('TR');
      var newCalHead = document.createElement('TH');
      newCalHead.appendChild(document.createTextNode("«"));
      newCalHead.onclick=function () { prevMonth(mm, yy); };
      newCalRow.appendChild(newCalHead);
      .....
      newCalTHead.appendChild(newCalRow);
      //nun folgen TR-TD Elemente in Schleifen, was ich mir mal spare aufzulisten
      //diese füge ich dem TBody zu mit
      newCalTBody.appendChild(newCalRow);

      // und dann alles in die Tabelle und zur Anzeige "showcalendar"
      newCalTable.appendChild(newCalTHead);
      newCalTable.appendChild(newCalTBody);
      showcalendar.appendChild(newCalTable);

      Das sollte - auch wenns nicht optimiert ist und sicher noch kürzer alles geht, aber für meine ersten Geh-Versuche ist es iO - so stimmen.

      Trotzdem noch eine Frage zu colspan - das macht ja Probleme: Ist es so richtig verbaut?
      newCalHead.setAttribute('colspan','5');

      Mit freundlichem Gruß
      Micha

      1. Sehe in dem Aufbau der Tabelle erstmal keinen Fehler,
        es kann sein, daß der Event-Handler so nicht funktioniert.

        Das ist bei mir etwas umfangreicher gelöst, aber grundsätzlich fängt nicht jedes HTML-Objekt jeden Event ab, es kann durchaus sein, daß der Event weiter nach oben gereicht wird.

        Und so einfach wie du es da gemacht hast ging es bei mir nicht, ich hatte da eine etwas umfangreichere Routine.
        ---
        Funktioniert auf IE, FF, Opera:

        td.colSpan = 3;
        td.rowSpan = 3;

        1. Hallo,

          »» Sehe in dem Aufbau der Tabelle erstmal keinen Fehler,

          es kann sein, daß der Event-Handler so nicht funktioniert.

          Der Funktioniert, hatte ich ja eingangs schon erwähnt, das mir ein Posting im Archiv da geholfen hat.

          Und so einfach wie du es da gemacht hast ging es bei mir nicht, ich hatte da eine etwas umfangreichere Routine.

          Naja, Rom wurde auch nciht an einem Tag erbaut, da darf ich doch sicher klein anfangen und üben ;-))

          td.colSpan = 3;

          Hey DANKE!!!
          Das geht in der Tat, kannst Du mir vll auch noch sagen, warum es so geht und
          so
          newCalHead.setAttribute('colspan','5');
          nicht?

          Und wo wir gerade bei Verständnisproblemen sind^^

          Ich weise den TH's eine class zu:
          newCalHead.setAttribute('class','select');

          Diese sieht so aus:
          #caltable th.select{
          font-weight: normal;
          cursor: pointer;
          }

          Der zweite Eintrag ist also der Cursor. Warum bekomme ich im IE6(!) trotzdem keine "Linkhand" zu sehen. Ich bekomme sie nur, wenn ich den Style noch explizit zu weise:
          newCalHead.style.cursor = "pointer";

          Warum ist das so?

          Mit freundlichem Gruß
          Micha

  2. Hallo,

    Nachdem sich das Darstellungsproblem dank Flashnfantasy gelöst hat, habe ich ein neues Problem

    Gebe ich meine Datei als text/html aus, dann funktioniert der Kalender
    Kalender (text/html)

    Ändere ich aber den content-type in application/xhtml+xml, so schreibt er die Tabelle in eine Zeile?!
    Kalender (application/xhtml+xml)

    Warum ist das so - eigentich wollte ich durch das umschreiben eher einen gegenteiligen Effekt erzielen?

    Mit freundlichem Gruß
    Micha