Dyn. erzeugte Tabelle wird nicht angezeigt
Enrico
- javascript
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
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
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
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
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*
Cü
Kai
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
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.
Cü
Kai
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]
Cü
Kai
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++)
Cü
Kai
Ä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
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
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
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.
Cü
Kai
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