nicht angemeldet
In HTML bestimmte Textzeile anzeigen
Hallo,
bräuchte dringend Hilfe und wäre auch sehr dankbar ;) und zwar:
Ich habe in meine HTML-Site eine Textdatei eingebunden, die Textdatei sieht so aus und heißt Vari.txt:
varUser|varPassword|varPrinter
Benutzer|Passwort|Drucker
User|Password|Printer
die HTML-Datei sieht so aus:
...
<table border=0 id="Anzeigetabelle" datasrc="#Vari" datapagesize="1" bgcolor='#BBCBFF' width=240px height=320px border='0' cellpadding='0' cellspacing='0'>
<form method="post" action="" name="fLog">
<input type="hidden" value="" id=au name=au>
<input type="hidden" value="" id=ap name=ap>
<input type="hidden" value="100003" name=key>
<input type="hidden" value="" name=uid>
<input type="hidden" value="" name=mode>
<body onload="setzefocus();" leftmargin='0' topmargin='0' marginwidth='0' marginheight='0'>
<object id="Vari" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="../../Vari.txt">
<param name="UseHeader" value="true">
<param name="FieldDelim" value="|">
</object>
<!-- Oberer Dunkelblauer Kasten -->
<tr>
<td height='30px' valign='top'>
<table bgcolor='#3972AB' height="30px" border="0">
<tr>
<td width=165px align="left">
<font face='Tahoma' color='#FF8C00' size='3'><b>Login</b></font></td>
<td width=75px align="right">
<font face='Tahoma' color='#FF8C00' size='3'><b>L-mobile</b></font></td>
</tr>
</table>
</td>
</tr>
<!-- Hellblauer Kasten -->
<tr>
<td valign='top' height='260px' width=240px>
<table width=100% border=0>
<tr>
<td height='30px'></td>
</tr>
<tr>
<td >
<font class="description"><span datafld="varUser"></span></font></td>
...
und so weiter...
So, nun will ich, dass er mir die 2.Textzeile(User|Password|Printer) anzeigt, dazu gebe ich bei datapagesize="2".
Dann bekomme ich 2 HTML-Seiten.
In der ersten HTML-Seite stehen die Werte aus der ersten Textzeile (Benutzer|Passwort|Drucker).
In der zweiten HTML-Seite stehen die Werte aus der zweiten Textzeile (User|Password|Printer).
Was muss ich tun damit er mir die 2.Textzeile anzeigt ohne die erste???
Später kommt noch eine dritte, vierte, fünfte etc. für diese sollte er die Werte übernehmen ohne das ich im Browser später 4 HTML-Seiten drin hab.
Die HTML-Seite sollte auf dem Internet Explorer 6 laufen und .asp scheidet aus. (Weil Lokal und ohne IIS)
Bin jedem über einen Vorschlag sehr dankbar.
Schon mal einen Schönen Dank im voraus.
Bye
-
Hallo,
zwei Vorbemerkungen:
Zum einen ist Dir hoffentlich bewußt, dass diese Technik (Tabular Data Control) nur in den Internet Explorern 4 bis 6 funktioniert. Sie ist in keinster Weise ein Webstandard, andere Browser haben sie deswegen auch nicht implementiert. Im tatsächlichen Wilden Web würde ich sie deswegen auf keinen Fall einsetzen. Wenn es dagegen nur um einen Einsatz auf dem eigenen Computer geht, dann sehe ich nichts, was dagegen spricht, ausser vielleicht der Nutzung des Internet Explorers als Browser. Ich will Dir damit raten, diese Technik auf keinen Fall im Web einzusetzen, Deine Seite funktioniert dann einfach nicht mehr in anderen Browsern. Im Jahr 2000 konnte man sich das noch leisten, inszwischen ist es nur noch peinlich. Und ja, das gilt immer, auch wenn diese Technik wohl recht praktisch ist. Inzwischen gibt es Methoden, das mit etwas mehr Code auch in Javascript zu lösen.
Zum anderen habe ich mich damit das letzte Mal im Jahr '99 beschäftigt, zudem habe ich als Mac-Nutzer keinen IE zum Testen. Das heisst, es kann gut sein, dass einiges, was ich Dir rate, auch nur auf genauem Lesen SELFHTMLs und der Spezifikationen basiert, nicht auf getesteten Ergebnissen. Ich hoffe aber, Du nimmst es Dir trotzdem zum Herzen.
die HTML-Datei sieht so aus:
Zuallererst räumen wir mal etwas Deinen HTML-Quellcode auf, Du hast da einige kritische Fehler und diverse Unschönheiten drin. Auch wenn es bei Microsofts nicht standardisierten Erweiterungen schon fast egal ist, ob man HTML Fehler begeht, sollte man sie trotzdem – schon aus Gründen einen späteren Wartbarkeit – nicht begehen.
Anhand Deines geposteten Quellcodes schließe ich, dass Deine HTML Datei derzeit wohl folgende Baumstruktur hat:
html
head
...
body
...
table
form <- Fehler 1!
...
body <- Fehler 2!
object <- Eventuelle Fehlerquelle
...
tr
td
table
...Und so weiter.
Fehler 1: Das Element table darf kein form-Element beinhalten, siehe die Elementreferenz zu table.
Fehler 2: Das Element body darf nur als Kindelement des Elementes html auftauchen, sonst nirgendwo im Dokument, siehe Elementreferenz zu body
Eventuelle Fehlerquelle: Das object-Element enthält nur die Daten, soll aber selbst nicht dargestellt werden. Eventuell wird es aber doch nicht dargestellt. Da Du die Daten eh in der Zieltabelle referenzierst, können die wohl irgendwo im Dokument stehen. Am sinnigsten wäre es wohl, das Element in den head zu packen, dort wird nix vom Browser gerendert, die Daten sind aber trotzdem noch da.
Ich würde also den Quellcode erstmal grob so umstellen:
html
head
...
object
body
table
...Du merkst, ich habe einiges an unnützen Krempel weggelassen. Wenn man so etwas entwickelt, ist es oft sinnvoll, erst mal nur mit nur dem nötigsten Quellcode zu starten, zum einen behält man so die Übersicht, zum anderen schließt man so einige Fehlerquellen aus. Ausserdem ist ein Großteil des von Dir geposteten Quellcodes unnötig, da der sich nur auf die Gestaltung bezieht, wie z.B. die umgebende Layouttabelle oder die font-Formatierung, die man eh besser mit CSS löst.
Das object-Element würde ich so wie von Dir erstellt beibehalten ...
<object id="data" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="vari.txt"> <param name="UseHeader" value="true"> <param name="FieldDelim" value="|"> </object>... ich habe nur die ID zu etwas geändert, das meinem gedanklichen Modell besser passt. Eventuell willst Du in Zukunft mehr Parameter der Tabular Data Control benutzen.
Nun zur Tabelle, in der die Daten angezeigt werden sollen. Du hast die dataIrgendwas-Attribute direkt an die umgebende Layouttabelle gepackt. ich würde die direkt an die Ausgabe-Tabelle packen. Weswegen ich hier auch nur eine Tabelle zeige, Du kannst ja später zur Layouttabelle zurück greifen, wenn Du mit CSS Layouts nicht zurecht kommst.
Du willst wohl letztendlich eine Darstellung haben, die ungefähr so strukturiert ist:
Benutzer Passwort Drucker
Amélie nino collignon
Die simpelste Form, das als HTML Tabelle zu basteln sieht so aus:
<table> <tr> <th>Benutzer</th><th>Passwort</th><th>Drucker</th> </tr> <tr> <td>Amélie</td><td>nino</td><td>collignon</td> </tr> </table>Beachte nebenbei, dass ich für die Tabellenüberschriften die strukturell korrekteren th-Elemente genommen habe, anstatt mit font und b rumzupfuschen. Das erleichtert später eine Umformatierung mit CSS.
Nach all der Vorarbeit kommen wir jetzt zu dem wirklich wichtigen, der Anbindung der Tabelle an die Daten. Zuerst wird der Tabelle die Datenquelle gesagt, dies geschieht über das Attribut datasrc. Dort wird eine Referenz auf das oben eingebundene object-Element angegeben und zwar referenzieren wir dessen ID.
<table datasrc="#data">Dann werden die Platzhalter von gerade („Amélie“) durch Datenfelder ersetzt. Aus
<td>Amélie</td>wird dann
<td><span datafld="varUser</span></td>Dummerweise muss man das beknackte span-Element benutzen, weil die Microsoftler wohl irgendwelche Drogen genommen haben und das Attribut datafld nicht gleich für alle sinnigen HTML-Elemente erlauben.
Dann kommt die Information, wieviele Datensätze wir gleichzeitig in der Tabelle anzeigen wollen, dazu dient das Attribut datapagesize. Dazu gleich mehr.
<table datasrc="#data" datapagesize="1">Die „1“ sagt aus, wir wollen nur einen Datensatz gleichzeitig anzeigen.
So, nun will ich, dass er mir die 2.Textzeile(User|Password|Printer) anzeigt, dazu gebe ich bei datapagesize="2".
Denn da hast Du dieses Attribut falsch verstanden. Ich versuche es mal zu erklären. Du hast eine Menge von Datensätzen, ein Datensatz entspricht hier einer Zeile:
eins | zwei | drei
vier | fünf | sechs
sieben | acht | neun
zehn | elf | zwölfIm Normalfall werden dann alle Datensätze angezeigt. Wenn man jedoch das Attribut datapagesize benutzt wird nur eine Auswahl („Page“) aus dieser Menge von Datensätzen angezeigt. Bei datapagesize="1" wird nur ein Datensatz angezeigt:
eins | zwei | drei <-
vier | fünf | sechs
sieben | acht | neun
zehn | elf | zwölfBei datapagesize="2" werden dann zwei Datensätze angezeigt:
eins | zwei | drei <-
vier | fünf | sechs <-
sieben | acht | neun
zehn | elf | zwölfDiese Auswahl an Datensätzen nennt sich hier „Page“. Um zwischen Pages zu wechseln, kannst Du nicht mit HTML operieren, dafür brauchst Du etwas dynamischeres, nämlich Javascript bzw. den MS-Dialekt JScript.
Dazu mehr im nächsten Posting, wenn ich richtig vermute, dass es für die Forumssoftware zu lang geworden ist.
-
Fortsetzung:
Was muss ich tun damit er mir die 2.Textzeile anzeigt ohne die erste???
Du musst erst festlegen, dass eine „Page“ nur einen Datensatz (Textzeile) umfasst und dann anweisen zur nächsten Page zu springen. Ersteres machst Du mit der Angabe von datapagesize="1". Für zweiteres gibt es eine Javascript-Methode.
Aber erst mal kümmern wir uns um die Kontrollelemente zu Blättern. Das ist es nämlich, was Du willst, vermute ich? Deine Tabelle sieht jetzt so aus:
Benutzer Passwort Drucker
Amélie nino collignon
← | →
Mit den Pfeilen wechselt man dann zwischen den einzelnen Datensätzen. In HTML würde ich die so einbinden:
</table> <p class="pagecontrols"><span>←</span> | <span>→</span></p>Anstatt die Pfeilsymbole direkt einzufügen habe ich Entities dafür genommen, lass Dich nicht davon verwirren, ebe
Damit beim Klicken auf die Pfeile etwas geschieht, brauchen wir sogenannte Event-Handler, genauer den Handler onclick:
<span onclick="tue was">←</span>Was soll getan werden? Man muss die Tabelle anweisen, die nächste „Page“ aus den Daten zu nehmen. Wo die Daten sind, weiss die Tabelle inzwischen selber, aber wir wissen noch nicht, wo die Tabelle ist. Dazu nutzen wir getElementById. Zuerst wird die Tabelle mit der ID „view“ ausgestattet ...
<table datasrc="#data" datapagesize="1" id="view">... dann kriegen wir auch ein Ergebnis, wenn wir in Javascript das Element mit dieser ID anfordern:
document.getElementById("view")Tabellen, die an Daten gebunden sind, haben in Internet Explorern vier weitere Methoden, mit denen man zwischen den angezeigten Pages navigieren kann:
firstPage() – springt zur ersten möglichen Page
lastPage() – springt zur letzten möglichen Page
previousPage() – springt zu vorherigen Page
nextPage() – springt zur nächsten PageUns interessieren nur die letzten beiden Methoden fürs Blättern. Der JS-Befehl, eine Page vorzublättern sieht dann so aus:
document.getElementById("view").nextPage()Dieses wird einfach in den Event-Handler reingepackt:
<span onclick="[code lang=javascript]document.getElementById("view").nextPage()">→</span>[/code]Analog geht es für das Zurückblättern. Du merkst hier bestimmt die Beschränkung, die diese Methoden mitbringen. Microsoft hat in seiner unergründlichen Weisheit nicht daran gedacht, Informationen mitzubringen, wieviele Pages es gibt oder ob man sich an der ersten oder letzten Stelle in den Liste der Pages befindet. Das wäre sehr praktisch, man könnte die Tabelle, die Kontrollen zum Blättern oder sonstige Anzeigemöglichkeiten modifizieren, um dem Nutzer anzuzeigen, dass man nicht mehr weiter blättern könnte. Geht aber nicht. Doof.
Nebenbei: Du kannst diese Methoden auch sonstwo in JS benutzen, Du bist nicht auf die Event-Handler angewiesen. Du könntest beispielsweise beim Laden der HTML-Seite direkt auf einen bestimmten Datensatz springen – dummerweise nur durch wiederholtes Aufrufen von nextPage(), da Microsoft eine extrem praktische Methode jumpToPage(i) vergessen hat.
Nebenbei: Das hier Vorgestellte und Dein Anwendungszweck sind aus der konzeptionellen Sicht genau das, was auch in dem SELFHTML-Beispiel Datei dynamisch in Tabelle einbinden vorgestellt wird. Zugegeben, die Erklärung ist etwas kompliziert, aber etwas Abstrahieren wäre wohl drin.
Nebenbei: Ich habe gerade die Event-Handler an span-Elemente gepackt, weil ich Nachteile von Buttons oder Links vermeiden wollte. Dadurch merkt der Benutzer nicht, dass die Dinger klickbar sind, also sollte man mit CSS die span-Elemente mit einem entsprechenden Cursor ausweisen:
.pagecontrols span {cursor:pointer;}.Fazit: Du merkst, für den Einsatz im Web ist diese Technik kritisch, zuallererst wird der Gurkenbrowser Internet Explorer und dessen aus Sicherheitssicht bedenkliche Erweiterungen ActiveX vorausgesetzt, dann braucht man auch noch Javascript zum Blättern, wobei das Deaktivieren von Javascript eines der Dinge ist, die man machen kann, um die Sicherheit im IE zu erhöhen. Ich würde das auf keinen Fall in der freien Wildbahn einsetzen.
Und ja, man kann alles durch andere Techniken ersetzen, die dann auch in anderen Browsern funktionieren. Ist zwar nicht so bequem und auch etwas komplizierter, weil man sich vieles selbst schreiben muss, aber Raktenwissenschaft isses auch nicht. Aber ich werde das nicht noch dokumentieren. ;)
Tim
-