Supportnet / Forum / Skripte(PHP,ASP,Perl...)
Tabelle mit Scrollbar?
Frage
Hallo,
hat jemand von Euch mal eine normale HTML-Tabelle mir Scrollbar hingekriegt?
Die normalen SELECT-Tabellen haben den Nachteil, dass sie kaum Formatierungsmöglichkeiten bieten.
Was ich brauche ist eine Tabelle, in der z.B. 20 Datensätze auf einmal angezeigt werden. Gibt es mehr als 20, dann wird gescrollt.
Die komplette Seite wird auch mit z.B. CGI generiert, so dass die Datensätze in einem Array stehen könnten.
Hier ein Beispiel, wie ich es mir ungefähr vorstelle (ohne Scrollbar).
Läuft unter IE, Netscape 6 u. Mozilla.
Gruss,
Michael
| Nachname | Vorname |
|---|---|
| Simpson | Homer |
| Simpson | Bart |
| Simpson | Lisa |
| Presley | Elvis |
| Zappa | Frank |
| Doe | John |
Antwort 1 von abc123
...noch etwas.
Das ganze muss auch mit der Tastatur zu bedienen sein.
IFrame, Frameset, Java-Applets oder ActiveX kommen nicht in Frage.
Gruss,
Michael
Das ganze muss auch mit der Tastatur zu bedienen sein.
IFrame, Frameset, Java-Applets oder ActiveX kommen nicht in Frage.
Gruss,
Michael
Antwort 2 von Friedel
Wie wärs, wenn du aus deinem JavaScript mal alles raus schmeißt, was mit der Frage nix zu tun hat? Ich hab keine Lust deine ganzen Angaben für Hintergrundfarben usw raus zu suchen um zu ergründen was du machen willst.
Wo ist dein Problem? Scrollbars sind die Balken an der rechten und/oder unteren Seite des Fensters die Angezeigt werden,wenn der Inhalt nicht ins Fenster passt. Diese Scrollbars werden bei deiner Seite natürlich auch angezeigt. Natürlich nur, wenn du dein Fenster so klein machst, daß der Seiteninhalt nicht ins Fenster passt.
Wo ist dein Problem? Scrollbars sind die Balken an der rechten und/oder unteren Seite des Fensters die Angezeigt werden,wenn der Inhalt nicht ins Fenster passt. Diese Scrollbars werden bei deiner Seite natürlich auch angezeigt. Natürlich nur, wenn du dein Fenster so klein machst, daß der Seiteninhalt nicht ins Fenster passt.
Antwort 3 von abc123
@Friedel
Wozu antwortest Du dann überhaupt, wenn Du kein Bock drauf hast?
Es war nur als Beispiel für die Anzeige gedacht.
Worum es mir geht ist folgendes:
<form>
<select size=3>
<option>Zeile1</option>
<option>Zeile2</option>
<option>Zeile3</option>
<option>Zeile4</option>
<option>Zeile5</option>
<option>Zeile6</option>
</select>
</form>
Dieser Code gibt eine Liste mit 6 Einträgen aus, wobei 3 gleichzeitig angezeigt werden. Rest ist über die Scrollbar erreichbar. Eine Liste eben.
Das SELECT bzw. OPTION-Tag bietet keine Möglichkeit Daten in Tabellenform anzuzeigen.
Also möchte ich es mit einfachen Tabellen machen und die Scrollbar-Funktionalität mit Javascript, es sei dann, dass es bessere Lösung dafür gibt (außer Applet, ActiveX, Flash usw.).
Gruss,
Michael
Wozu antwortest Du dann überhaupt, wenn Du kein Bock drauf hast?
Es war nur als Beispiel für die Anzeige gedacht.
Worum es mir geht ist folgendes:
<form>
<select size=3>
<option>Zeile1</option>
<option>Zeile2</option>
<option>Zeile3</option>
<option>Zeile4</option>
<option>Zeile5</option>
<option>Zeile6</option>
</select>
</form>
Dieser Code gibt eine Liste mit 6 Einträgen aus, wobei 3 gleichzeitig angezeigt werden. Rest ist über die Scrollbar erreichbar. Eine Liste eben.
Das SELECT bzw. OPTION-Tag bietet keine Möglichkeit Daten in Tabellenform anzuzeigen.
Also möchte ich es mit einfachen Tabellen machen und die Scrollbar-Funktionalität mit Javascript, es sei dann, dass es bessere Lösung dafür gibt (außer Applet, ActiveX, Flash usw.).
Gruss,
Michael
Antwort 4 von Friedel
Das ist jetzt ein Formular mit Auswahlfeldern. Sowas kommt doch oben gar nicht vor???
Mach doch ne Tabelle mit Auswahlfeldern
<html>
<head>
</head>
<body>
<form>
<table>
<tr>
<td>
<select size="1" name="a1">
<option selected>Nachname</option>
<option>________________</option>
</select>
</td>
<td>
<select size="1" name="a2">
<option selected>Vorname</option>
<option>________________</option>
</select>
</td>
</tr>
<tr>
<td>
<select size="3" name="a3">
<option selected>Simpson</option>
<option>Simpson</option>
<option>Presley</option>
<option>Zappa</option>
<option>Zappa</option>
<option>Doe</option>
<option>________________</option>
</select>
</td>
<td>
<select size="3" name="a4">
<option selected>Homer</option>
<option>Bart</option>
<option>Lisa</option>
<option>Elvis</option>
<option>Frank</option>
<option>________________</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Oder meinst du was ganz anderes?
Mach doch ne Tabelle mit Auswahlfeldern
<html>
<head>
</head>
<body>
<form>
<table>
<tr>
<td>
<select size="1" name="a1">
<option selected>Nachname</option>
<option>________________</option>
</select>
</td>
<td>
<select size="1" name="a2">
<option selected>Vorname</option>
<option>________________</option>
</select>
</td>
</tr>
<tr>
<td>
<select size="3" name="a3">
<option selected>Simpson</option>
<option>Simpson</option>
<option>Presley</option>
<option>Zappa</option>
<option>Zappa</option>
<option>Doe</option>
<option>________________</option>
</select>
</td>
<td>
<select size="3" name="a4">
<option selected>Homer</option>
<option>Bart</option>
<option>Lisa</option>
<option>Elvis</option>
<option>Frank</option>
<option>________________</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Oder meinst du was ganz anderes?
Antwort 5 von abc123
Hallo,
ich glaube wir reden aneinander vorbei :-)
Ich möchte einer gewöhnlichen Tabelle (<TABLE>.....</TABLE>) eine Scrollbar verpassen, damit nur eine bestimmte Anzahl von Zeilen gleichzeitig angezeigt wird.
Mit dem Formularelement <SELECT> kann man NUR eine einfache Liste anzeigen, nicht jedoch eine schön formatierte Tabelle. (Denk einfach an JTable in Java)
Es sieht so aus als hätte es hier noch keiner in dieser Form gemacht. Nun selbst ist der Mann :-)
Ich bin gerade dabei sowas zu entwickeln. Die gesamte Funktionalität wird dann in dem JS-Modul jsTable.js stehen.
So wird man es dann in HTML verwenden können. (OOP-Javascript)
<html>
<head>
<script language="Javascript" src="jsTable.js"></script>
<script>
var tableHeader = ["HeaderCol1", "HeaderCol2", "HeaderCol3", "HeaderCol4"];
var tableData = [
["Row1Col1", "Row1Col2", "Row1Col3", "Row1Col4"],
["Row2Col1", "Row2Col2", "Row2Col3", "Row2Col4"],
["Row3Col1", "Row3Col2", "Row3Col3", "Row3Col4"],
["Row4Col1", "Row4Col2", "Row4Col3", "Row4Col4"],
["Row5Col1", "Row5Col2", "Row5Col3", "Row5Col4"],
["Row6Col1", "Row6Col2", "Row6Col3", "Row6Col4"],
["Row7Col1", "Row7Col2", "Row7Col3", "Row7Col4"],
["Row8Col1", "Row8Col2", "Row8Col3", "Row8Col4"],
["Row9Col1", "Row9Col2", "Row9Col3", "Row9Col4"]
];
var table = new jsTable(tableData, tableHeader);
table.setScrollbarPolicy(VERTICAL_SCROLLBAR_AS_NEEDED);
table.setRowsVisible(5);
eventHandler.addEventListener(table);
focusManager.addComponent(table);
</script>
</head>
<body>
<script>
table.display();
</script>
</body>
</html>
Gruss,
Michael
ich glaube wir reden aneinander vorbei :-)
Ich möchte einer gewöhnlichen Tabelle (<TABLE>.....</TABLE>) eine Scrollbar verpassen, damit nur eine bestimmte Anzahl von Zeilen gleichzeitig angezeigt wird.
Mit dem Formularelement <SELECT> kann man NUR eine einfache Liste anzeigen, nicht jedoch eine schön formatierte Tabelle. (Denk einfach an JTable in Java)
Es sieht so aus als hätte es hier noch keiner in dieser Form gemacht. Nun selbst ist der Mann :-)
Ich bin gerade dabei sowas zu entwickeln. Die gesamte Funktionalität wird dann in dem JS-Modul jsTable.js stehen.
So wird man es dann in HTML verwenden können. (OOP-Javascript)
<html>
<head>
<script language="Javascript" src="jsTable.js"></script>
<script>
var tableHeader = ["HeaderCol1", "HeaderCol2", "HeaderCol3", "HeaderCol4"];
var tableData = [
["Row1Col1", "Row1Col2", "Row1Col3", "Row1Col4"],
["Row2Col1", "Row2Col2", "Row2Col3", "Row2Col4"],
["Row3Col1", "Row3Col2", "Row3Col3", "Row3Col4"],
["Row4Col1", "Row4Col2", "Row4Col3", "Row4Col4"],
["Row5Col1", "Row5Col2", "Row5Col3", "Row5Col4"],
["Row6Col1", "Row6Col2", "Row6Col3", "Row6Col4"],
["Row7Col1", "Row7Col2", "Row7Col3", "Row7Col4"],
["Row8Col1", "Row8Col2", "Row8Col3", "Row8Col4"],
["Row9Col1", "Row9Col2", "Row9Col3", "Row9Col4"]
];
var table = new jsTable(tableData, tableHeader);
table.setScrollbarPolicy(VERTICAL_SCROLLBAR_AS_NEEDED);
table.setRowsVisible(5);
eventHandler.addEventListener(table);
focusManager.addComponent(table);
</script>
</head>
<body>
<script>
table.display();
</script>
</body>
</html>
Gruss,
Michael
Antwort 6 von Friedel
Sorry. Ich hab keine Ahnung was du meinen könntest.
Antwort 7 von abc123
Trotzdem Danke!
Wenn ich das Ding fertig habe, dann wirst Du sehen, wie ich es gemeint habe.
Du kannst es dann vielleicht anderen auf Deiner Seite zur Verfügung stellen, wenn Du möchtest.
Wahrscheinlich mache ich es nicht mehr heute, habe keine Lust drauf.
Das Wetter ist zu schön, um am PC zu sitzen und sich über die Browserunterschiede zu ärgern. :-)
Gruss,
Michael
Wenn ich das Ding fertig habe, dann wirst Du sehen, wie ich es gemeint habe.
Du kannst es dann vielleicht anderen auf Deiner Seite zur Verfügung stellen, wenn Du möchtest.
Wahrscheinlich mache ich es nicht mehr heute, habe keine Lust drauf.
Das Wetter ist zu schön, um am PC zu sitzen und sich über die Browserunterschiede zu ärgern. :-)
Gruss,
Michael