Enrico: Dyn. erzeugte Tabelle wird nicht angezeigt

Hallo werte "Nachtworkaholics",

bei meiner DVD-Verwaltung mache ich schöne Fortschritte, die Navigation
läuft, ich kann die Tabelle mit den DVD-Daten wunderbar sortieren, bin
soweit sehr zufrieden.

Nun wollte ich, da die Tabelle dynamisch d.h. je nach gewählter Aktivität
(Anzeige aller Titel, Anzeige nur derjenigen Titel mit einem bestimmten
Anfangsbuchstaben,...) aus dem Quell-Array "FILMDATEN" erzeugt und angezeigt
werden soll.

Hier zunächst die Datei "DVD-VERWALTUNG.html", die folgenden Aufbau aufweist:

<HTML>
     <HEAD>
       <TITLE>DVD-Verwaltung</TITLE>
       <SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="JS_DATENBANK.js"></SCRIPT>
       <SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="JS_TABELLE_SORTIEREN.js"></SCRIPT>
       <SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="JS_AKTIONEN.js"></SCRIPT>
       <LINK HREF="CSS_ANZEIGE.css" REL="STYLESHEET" TYPE="TEXT/CSS">
     </HEAD>
     <BODY ONLOAD="TABELLE_ANZEIGEN(FILMDATEN);">
       <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
         <TR>
           [...] Navigation [...]
         </TR>
       </TABLE>
     </BODY>
   </HTML>

Das Array "FILMDATEN" mit den Details zu den einzelnen Filmen wird in der
Datei "JS_DATENBANK.js" nach folgendem Muster definiert:

var FILMDATEN = new Array(
   "{DVD-Nr.}","{Titel}","{Inhalt}","{Genre}","{FSK}",
   "{DVD-Nr.}","{Titel}","{Inhalt}","{Genre}","{FSK}",
   ...usw...

Auszugsweise sieht das folgendermassen aus:

var FILMDATEN = new Array(
   "1","DIE SIEGER","Karl Simon, Angehöriger ...","Action / Thriller","16",
   "2","DOMINO","Das ebenso attraktive wie sturköpfige ...","Action / Thriller","16",
   ...
   );

Auf die Datei "JS_TABELLE_SORTIEREN.js" brauche ich hier nicht näher eingehen,
da die Sortierung einwandfrei funktioniert.

Wohl aber auf die Datei "JS_AKTIONEN.js", die - bislang - nur die Funktion
"TABELLE_ANZEIGEN()" enthält:

function TABELLE_ANZEIGEN(ARRAY)
   {
     var TABELLE;

TABELLE+='='<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" CLASS="rowstyle-alt colstyle-alt no-arrow">';
     TABELLE+='<THEAD>';
     TABELLE+='<TR>';
     TABELLE+='<TH CLASS="sortable-numeric">DVD-Nr.</TH>';
     TABELLE+='<TH CLASS="sortable-text">Titel</TH>';
     TABELLE+='<TH WIDTH="100%">Inhalt</TH>';
     TABELLE+='<TH CLASS="sortable-text">Genre</TH>';
     TABELLE+='<TH CLASS="sortable-numeric">FSK</TH>';
     TABELLE+='</TR>';
     TABELLE+='</THEAD>';
     TABELLE+='<TBODY>';

for(var i=0;i==ARRAY.length();i++)
     {
       TABELLE+='<TR>';
       TABELLE+='<TD>'+ARRAY[i]+'</TD>';
       TABELLE+='<TD NOWRAP="NOWRAP"><DIV ALIGN="LEFT">'+ARRAY[i+1]+'</DIV></TD>';
       TABELLE+='<TD><DIV ALIGN="LEFT">'+ARRAY[i+2]+'</DIV></TD>';
       TABELLE+='<TD NOWRAP="NOWRAP"><DIV ALIGN="LEFT">'+ARRAY[i+3]+'</DIV></TD>';
       TABELLE+='<TD><DIV ALIGN="LEFT">'+ARRAY[i+4]+'</DIV></TD>';
       TABELLE+='</TR>';
     }

TABELLE+='</TBODY>';
     TABELLE+='</TABLE>';

document.open();
     document.write(TABELLE);
   }

Diese Funktion sollte eigentlich die Details eines übergebenen Arrays in Tabellenform
ausgeben, tut sie aber nicht, es wird nichts angezeigt.

Wo liegt der Fehler ?

Ich hoffe, Ihr könnt mir weiterhelfen.

Wie schon des öfteren: vielen lieben Dank :-)

Gruß,
Enrico

  1. Hallo werter ebenso "Nachtworkaholic" ^^

    <BODY ONLOAD="TABELLE_ANZEIGEN(FILMDATEN);">

    ähem, ich glaube irgendwo mal aufgeschnappt zu haben, dass man nich unbedingt Events ins Body-Tag rein nehmen soll, kann sein, dass da der Hund begraben liegt ... vllt Browser abhängig?!? Sprich einfach mal ein div-Tag nehmen und da das onload angeben!!

    Grüße

    tobeit

    1. Hallo tobeit,

      einfach mal ein div-Tag nehmen und da das onload angeben

      Wie meinst Du das genau ?

      An die Stelle, an der die Tabelle angezeigt werden soll, einen eigenen
      <div>-Bereich definieren ?

      Wie müsste ich denn dann die Funktion "TABELLE_ANZEIGEN(ARRAY)" ändern,
      damit die Ausgabe hier auch richtig erfolgt ?

      Gruß,
      Enrico

      1. Ich habe es jetzt folgendermassen versucht:

        <P ID="AUSGABE"></P>
            <SCRIPT TYPE="TEXT/JAVASCRIPT">
              TABELLE_ANZEIGEN(FILMDATEN);
            </SCRIPT>

        Die Javascript-Funktion habe ich wie folgt geändert:

        document.all.AUSGABE.innerText = TABELLE;

        Aber auch hier tut sich leider gar nichts.

        document.getElementById("AUSGABE").innerHTML = TABELLE;

        Auch hier wird mir nichts angezeigt.

        Gruß,
        Enrico

  2. Grütze .. äh ... Grüße!

    Das Array "FILMDATEN" mit den Details zu den einzelnen Filmen wird in der
    Datei "JS_DATENBANK.js" nach folgendem Muster definiert:

    var FILMDATEN = new Array(
       "{DVD-Nr.}","{Titel}","{Inhalt}","{Genre}","{FSK}",
       "{DVD-Nr.}","{Titel}","{Inhalt}","{Genre}","{FSK}",
       ...usw...

    Das ist für deine Zwecke so nicht anwendbar. Du versuchst hier, zwei Techniken zu kombinieren und außerdem benötigst du ein zweidimensionales Array.

    Entweder:

    FILMDATEN=new Array();  
    FILMDATEN[0] = ["{DVD-Nr.}","{Titel}","{Inhalt}","{Genre}","{FSK}"];  
    FILMDATEN[1] = ["{DVD-Nr.}","{Titel}","{Inhalt}","{Genre}","{FSK}"];  
    usw.  
    
    

    oder

    FILMDATEN=[  
      ["{DVD-Nr.}","{Titel}","{Inhalt}","{Genre}","{FSK}"],  
      ["{DVD-Nr.}","{Titel}","{Inhalt}","{Genre}","{FSK}"],  
      ....  
      ["{DVD-Nr.}","{Titel}","{Inhalt}","{Genre}","{FSK}"]  
    ];
    

    (Zu Beachten: das fehlende Komma nach dem letzten Eintrag!)

    Nachteil: Man weiß nicht, welcher Film welche Nummer hat.

    Ich persönlich würde es als JSON-Objekt aufbauen, dann ist es möglich, die Daten viel deutlicher  zuzuordnen; man kann die Reihenfolge verändern, man kann auch mal bestimmte Daten weglassen (Das alles müßte dann natürlich die Funktion abfangen)

    Sähe dann z.B. so aus:

    var FILMDATEN = {  
      "film1": {  
        "DVD-Nr." : 1,  
        "Titel" : "SelfHTML für Anfänger",  
        "Genre" : "Lehrvideo",  
        "FSK" : "OA"  
      },  
      "film2": {  
        //mehr Daten  
      }  
    };
    

    (ich hab es mal zur Anschaulichkeit schön untereinander geschrieben, geht natürlich auch pro Film in einer Zeile.) Umwandlung von deiner jetzigen Form dürfte auch kein Thema sein, schreib dir ne Funktion, die die Arraydaten mit document.write ausgibt und setze die Formatierungen als Text dazwischen. Done.

    function TABELLE_ANZEIGEN(ARRAY)
       {
         var TABELLE;

    TABELLE+='='<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" CLASS="rowstyle-alt colstyle-alt no-arrow">';

    Diese Zeile ist falsch.

    Du startest mit TABELLE+= dann beginnt der String mit '= und dann schließt du ihn wieder mit ' wodurch <TABLE .. als fehlerhafter Programmcode stehen bleibt.

    TABELLE+='</TR>';

    Außerdem alle schließenden Elemente so schreiben

    </element>  d.h. den "/" mit "" escapen

    for(var i=0;i==ARRAY.length();i++)

    Außerdem nennst du den übergebenen Paramenter der funktion "ARRAY", was abgesehen von der Großschreibung einen reservierten Namen darstellt, also nicht nutzen!

    Ansonsten ist deine konsequente Großschreibung bei HTML und Javascript ungünstig, schreib besser alle Variablen und die HTML-Tags klein.

    document.write(TABELLE);

    damit überschreibst du dein Dokument wieder, d.h. das HTML in DVD-VERWALTUNG.html wird komplett überschrieben. Du mußt die Tabelle an das vorhandene Element anhängen. Da ich diese Schreibung eigentlich nicht benutze, weiß ich jetzt nicht, ob

    document.body.innerHTML += TABELLE;

    so funktioniert. Ansonsten wird mich jemand berichtigen ;)

    Wo liegt der Fehler ?

    Welchen der vielen meinst du? *g*


    Kai

    --
    What is the difference between Scientology and Microsoft? One is an
    evil cult bent on world domination and the other was begun by L. Ron
    Hubbard.
    ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
    1. Hallo Kai,

      vielen Dank für Deine ausführliche Rückmeldung.

      Ich habe Deine Ratschläge umgesetzt:

      Das Array habe ich wie folgt definiert:

      FILMDATEN = new Array();
         FILMDATEN[0] = ["{DVD-Nr.}","{Titel}","{Inhalt}","{Genre}","{FSK}"];
         FILMDATEN[1] = ["{DVD-Nr.}","{Titel}","{Inhalt}","{Genre}","{FSK}"];
      ...

      Alle abschliessenden Tags sind jetzt maskiert:

      </TH>

      Die fehlerhafte Angabe beim Zusammensetzen der Tabelle ist korrigiert.

      Ich habe den Namen ARRAY gegen INHALT getauscht.

      Aber es funktioniert noch immer nicht.

      Liegt hier eine fehlerhafte Übergabe der "Datenbank" vor ?

      Es müsste doch zumindest der Tabellenkopf angezeigt werden,
      aber nicht einmal das erfolgt.

      <BODY onLoad="TABELLE_ANZEIGEN(FILMDATEN);">

      Ich habe es auch folgendermassen versucht:

      <P ID="AUSGABE"></P>
          <SCRIPT TYPE="TEXT/JAVASCRIPT">
            TABELLE_ANZEIGEN(FILMDATEN);
          </SCRIPT>

      Die Javascript-Funktion habe ich wie folgt geändert:

      document.all.AUSGABE.innerText = TABELLE;

      Aber auch hier tut sich leider gar nichts.

      document.getElementById("AUSGABE").innerHTML = TABELLE;

      Auch hier wird mir nichts angezeigt.

      Gruß,
      Enrico

      1. Grütze .. äh ... Grüße!

        vielen Dank für Deine ausführliche Rückmeldung.

        Aber es funktioniert noch immer nicht.

        Liegt hier eine fehlerhafte Übergabe der "Datenbank" vor ?

        Nicht, wenn das Script mit einem Fehler aussteigt. Bei einem Syntaxfehler z.B. wird das Script gar nicht ausgeführt.

        Ist jetzt natürlich ohne aktuellen Testcase sehr schwer zu sagen, aber was ich vorhin noch anmerken wollte (und natürlich prompt vergessen habe) ist die Anpassung der Schleife zur Erzeugung der Tabellenzeilen.

        Das hier:

             for(var i=0;i==INHALT.length();i++)  
             {  
               TABELLE+='<TR>';  
               TABELLE+='<TD>'+INHALT[i]+'<\/TD>';  
               TABELLE+='<TD NOWRAP="NOWRAP"><DIV ALIGN="LEFT">'+INHALT[i+1]+'<\/DIV><\/TD>';  
               TABELLE+='<TD><DIV ALIGN="LEFT">'+INHALT[i+2]+'<\/DIV><\/TD>';  
               TABELLE+='<TD NOWRAP="NOWRAP"><DIV ALIGN="LEFT">'+INHALT[i+3]+'<\/DIV><\/TD>';  
               TABELLE+='<TD><DIV ALIGN="LEFT">'+INHALT[i+4]+'<\/DIV><\/TD>';  
               TABELLE+='<\/TR>';  
             }
        

        würde jetzt natürlich nicht mehr laufen, weil die Struktur des Array geändert wurde.

        Du mußt die Datensätze jetzt mit INHALT[i][0] bis INHALT[i][3] ansprechen.

        Außerdem: Firefox und Addon Firebug installieren, das hilft wirklich beim Entwickeln sehr, besonders bei der Suche nach Javascript-Fehlern.


        Kai

        --
        What is the difference between Scientology and Microsoft? One is an
        evil cult bent on world domination and the other was begun by L. Ron
        Hubbard.
        ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
        1. Grütze .. äh ... Grüße!

          Grütze .. äh ... Grüße!

          Du mußt die Datensätze jetzt mit INHALT[i][0] bis INHALT[i][3] ansprechen.

          Nachgezählt hab: Nein, nicht bis [3] sondern bis [4]


          Kai

          --
          What is the difference between Scientology and Microsoft? One is an
          evil cult bent on world domination and the other was begun by L. Ron
          Hubbard.
          ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
          1. Grütze .. äh ... Grüße!

            Du mußt die Datensätze jetzt mit INHALT[i][0] bis INHALT[i][3] ansprechen.

            Nachgezählt hab: Nein, nicht bis [3] sondern bis [4]

            Verdammt noch mal! Schon wieder zu früh gekommen .. äh abgeschickt.

            a) Fehler wie von tobeit geschildert
            b) die Bedingung der for schleife stimmt auch nicht

            for(var i=0;i==ARRAY.length();i++)

            muß heißen

            for(var i=0;i < INHALT.length;i++)


            Kai

            --
            What is the difference between Scientology and Microsoft? One is an
            evil cult bent on world domination and the other was begun by L. Ron
            Hubbard.
            ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
      2. Ähem,

        eigentlich sollt ich ja was anderes tun, aber jetzt hab ich an der Sache den Narren gefressen!! Kleiner Tipp meinerseits nachdem selber kürzlich mit der Nase drauf gestoßen wurde: setz vermehrt die Fehlerkonsole vom Firefox ein, zu finden unter Extras und beim IE erhälst Du normalerweise unten in der Leiste Deine Fehlermeldung!!

        ... so hab ich gerade entdeckt, dass Du das Attribut length zur Funktion gemacht hast!! Also bei dvd.length() die Klammern weg!!

        Grüße

      3. Hi,

        <P ID="AUSGABE"></P>

        document.all.AUSGABE.innerText = TABELLE;

        Du willst tatsächlich den Quelltext der Tabelle als Ausgabe erhalten?

        document.getElementById("AUSGABE").innerHTML = TABELLE;

        Das Element mit der Id AUSGABE ist ein p-Element. Ein p-Element darf gar kein table-Element enthalten.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        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.
        1. Sodalla,

          vielen Dank für Eure zahlreichen Korrekturen und Anregungen.

          -Anpassung der Schleife aufgrund Änderung des Array erledigt
          -Klammern bei INHALT.length() entfernt
          -FireBug ist installiert

          -Array wird jetzt angezeigt mit allen Filmen, allerdings habe ich jetzt
          oberhalb der Tabelle das Wort "undefined" stehen, was besagt, dass ein
          Wert (?) nicht definiert ist.
          -Die Tabelle wird jetzt komplett in die Breite gezogen und sprengt damit
          die Vorgabe, sich nur auf die komplette Bildschirmbreite zu beschränken.
          -Die Tabelle ist jetzt nicht mehr sortierbar

          Ich krieg' noch 'nen Koller mit meinem Vorhaben...

          Vielleicht könnte ich Euch per eMail meine Verwaltung mit allen
          Dateien schicken, damit Ihr sie Euch auf Euren Rechnern anschauen
          könnt, ich weiß nicht, ob ich/wir hier so weiterkomme/n...

          Gruß,
          Enrico

          1. Grütze .. äh ... Grüße!

            -Array wird jetzt angezeigt mit allen Filmen, allerdings habe ich jetzt
            oberhalb der Tabelle das Wort "undefined" stehen, was besagt, dass ein
            Wert (?) nicht definiert ist.

            Fehlt denn irgendetwas, was eigentlich angezeigt werden sollte?

            -Die Tabelle wird jetzt komplett in die Breite gezogen und sprengt damit
            die Vorgabe, sich nur auf die komplette Bildschirmbreite zu beschränken.

            Daran lässt sich bestimmt etwas drehen.

            -Die Tabelle ist jetzt nicht mehr sortierbar

            Das Script wird wohl auch noch auf das geänderte Array-Format umgebaut werden müssen.

            Ich krieg' noch 'nen Koller mit meinem Vorhaben...

            So kurz vor dem Ziel? ;) Immerhin hast du jetzt schon mal eine Tabelle.

            Vielleicht könnte ich Euch per eMail meine Verwaltung mit allen
            Dateien schicken, damit Ihr sie Euch auf Euren Rechnern anschauen
            könnt, ich weiß nicht, ob ich/wir hier so weiterkomme/n...

            Stell es entweder irgendwo online (bevorzugte Methode, hier wird nicht jeder bereit sein, sich Archive zu ziehen) oder pack es und schmeiß es z.B. bei rapidshare auf den Server.


            Kai

            --
            What is the difference between Scientology and Microsoft? One is an
            evil cult bent on world domination and the other was begun by L. Ron
            Hubbard.
            ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
  3. Hallo Enrico,

    also ich würde so eine sortierbare Tabelle ganz anders aufbauen, nur mit DOM- oder Methoden des TABLE-HTML-Objekts wie deleteRow() oder insertRow()

    http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#table

    Sich eine ganze Tabelle als innerHTML eines anderen Objekts zusammenzubauen, das halte ich für keine gute Idee.

    In meiner sortierbaren Tabelle steckt mehr "Musik".

    Gruß Gernot