nicht angemeldet
Eine mit CSS erstellte Tabelle sortieren
0 0 0 
JürgenB
Eine mit CSS erstellte Tabelle sortieren
Hallo,
ich habe eine Tabelle mit CSS erstellt und möchte nach Zeilen (aufsteigend/absteigend) sortieren. Trotz Recherche im 'HTML' Buch von Stefan Münz/Wolfgang Nefzger und auf 'Selfhtml.org' komme ich zu keiner Lösung.
Kann man das nach dem Datenmodell: 'Tabular Data Control (TDC)' und einer Tabellenformatierung mit CSS bewerkstelligen?...oder sollte man tatsächlich, wie im Buch beschrieben, sich des <table> Tags bedienen?
Hier der Quellcode:
HTML Code:
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="tabueb tabuez1">
Sp. 1</div>
<div class="tabgen tabr1_z1">
Reihe 1</div>
<div class="tabgen tabr2_z1">
Reihe 2</div>
<div class="tabgen tabr3_z1">
Reihe 3</div>
<div class="tabgen tabr4_z1">
Reihe 4</div>
</body>
</html>
CSS Code:
.tabueb { border-bottom-color: #003366;
border-bottom-style: solid;
border-bottom-width: 2px;
font-weight: bold;
font-size: 10px;
position: absolute;
top: 119px;
height: 15px; }
/*********************************************************/
.tabgen { border-bottom-color: #003366;
border-bottom-style: solid;
border-bottom-width: 1px;
font-size: 10px;
position: absolute;
height: 15px; }
/*********************************************************/
.tabuez1 { left: 10px;
width: 400px; }
/*********************************************************/
.tabr1_z1 { top: 139px;
left: 10px;
width: 400px; }
/*********************************************************/
.tabr2_z1 { top: 159px;
left: 10px;
width: 400px; }
/********************************************************/
.tabr3_z1 { top: 179px;
left: 10px;
width: 400px; }
/*********************************************************/
.tabr4_z1 { top: 199px;
left: 10px;
width: 400px; }
/*********************************************************/
Gruß, Stephan
-
-
Hallo,
Danke für die Antworten. Ich glaube ich sollte meine Strategie der Web-Gestaltung überdenken.
Die Bücher HTML... von Münz/Nefzger und das Buch Cascading Stylsheets von Shafer/Yank haben mir sehr bei meiner Web-Gestaltung geholfen. Nun muss ich aber feststellen das CSS sehr gut für die Gestaltung einer Webseite ist, aber doch Grenzen aufzeigt. Ich glaube das ich um eine Datenanbindung mit SQL nicht umherkomme. Des weiteren wäre es wohl von Vorteil JAVA zu lernen.
Was meint Ihr?Danke noch mal für Eure Hilfe
Gruß Stephan
-
-
Hi,
oder sollte man tatsächlich, wie im Buch beschrieben, sich des <table> Tags bedienen?
tabellarische Daten gehören in eine Tabelle.
Die Sortierung solltest Du besser serverseitig vornehmen, wenn Du die Möglichkeit dazu hast. Andernfalls würde ich die Daten in ein Array packen, dieses jeweils umsortieren und daraus per DOM die Tabelle erzeugen. (Beachte: IE erfordert hier zwingend auch das Einfuegen des tbody-Elements)
Deine Freunde waeren dann
- document.createElement()
- document.createTextNode()
- [EL].appendChild()
ggf noch cloneNode() oder removeChild(). Mehr dazu in der hiesigen Doku/Referenz.
Wenn Du eine kleine Tabelle hast kannst Du sie ja auch in beiden Sortierungen reinschreiben, und jeweils eine davon mit display:none verstecken (Dafür schlagen sie mich jetzt wieder...)
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hallo Joachim.
Deine Freunde waeren dann
- document.createElement()
- document.createTextNode()
- [EL].appendChild()
ggf noch cloneNode() oder removeChild(). Mehr dazu in der hiesigen Doku/Referenz.
Außerdem für die Interaktion mit Tabellen sind noch insertRow und insertCell sehr empfehlenswert. (Auffällig ist hier nebenbei auch, dass es beim HTMLTableElement keine insertTBody-Methode gibt.)
Einen schönen Montag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
mathbr:del.icio.us/ mathbr:w00t/-
Hi Ashura,
Außerdem für die Interaktion mit Tabellen sind noch insertRow und insertCell sehr empfehlenswert.
Ja natürlich, ich vergaß...
Gruesse, Joachim
--
Am Ende wird alles gut.
-
Hallo Stephan,
wenn du die Tabelle, warum auch immer, aus DIVs zusammensetzen willst, wirst du dir den Tabellensortierer wohl selbst zusammenbasteln müssen. Wenn du den DIVs entsprechende IDs gibst, könntest du sogar auf "normale" Sortierer zurückgreifen. Wenn du aber bereit bist, "echte" Tabellen zu nehmen, dann hätte ich was für dich: http://j-berkemeier.de/TableSort.html. Der Teil, der die Tabelle in ein Array und zurück kopiert, liese sich bestimmt auch auf DIVs umschreiben.
Gruß, Jürgen