Hallo TPler,
bei allen Projekten, in denen man viele Daten in tabellarischer Form auflistet, taucht immer wieder das Problem auf,
dass man die Tabellenüberschriften bei sehr großen Tabellen nach dem Scrollen nicht mehr sieht. Sind zusätzlich auch
horizontal viele Daten vorhanden, so dass man horizontal scrollen muss, so verliert man die Übersicht nur allzu leicht.
Wünschenswert wäre also eine Möglichkeit die Spaltenbezeichnungen zu fixieren, so dass man stets den Überblick behält.
Hier ist mein Ansatz, um das umzusetzen. Das Script kopiert die Spaltenüberschriften aus dem Tabellenkopf dynamisch
in ein am Seitenende fixiertes DIV. Das funktioniert wie folgt:
- der Kopfbereich der Tabelle muss semantisch korrekt mittels thead-Angabe notiert werden
- für den Zugriff darauf muss der thead-Bereich mit der ID "mythead" notiert werden
- es wird ein Container-Div notiert, welches vom Javascript dynmaisch befüllt wird
- wenn die Fenstergröße verändert wird, wird das Div unter Berücksichtigung der neuen Bedingungen neu gezeichnet
- wenn horizontal gescrollt wird, wird das Div neu gezeichent
Hier der bisherige Aufbau (speichern als z.B. index.php):
PHP-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fixed Header</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#fixeddiv
{
position:fixed;
bottom:0px;
left:8px;
padding:0; margin:0;
background-color:transparent;
color:#ffCC00;
text-align:center;
font-weight:bold;
}
.myTH
{
background-color:#cf1218;
color:#FFCC00;
border:1px solid #ffcc00;
}
</style>
<script type="text/javascript" language="javascript">
function resizeFixeddiv()
{
var mythead = document.getElementById("mythead");
if (mythead)
{
var t='';
var offsetx=0; // Offset für horizontales scrollen
if (document.documentElement.scrollLeft ) offsetx=document.documentElement.scrollLeft; // IE alt
if (window.pageXOffset) offsetx=window.pageXOffset; // richtige Browser :)
var bottom=0; // errechneter Offset zum unteren Rand für absolute Positionierung der DIVs
for (i=mythead.childNodes.length-1;i>=0;i--) // wir fangen in der letzten Zeile an, um den Offset einfach addieren zu können
{
if (mythead.childNodes[i].nodeName=="TR") // wenn es sich um eine neue Zeile handelt bearbeiten wir diese komplett
{
var myths=mythead.childNodes[i].getElementsByTagName("th");
var offset_links=0-offsetx;
var hoehe=myths[0].offsetHeight;
var spaltenanzahl=myths.length;
for (a=0;a<spaltenanzahl;a++)
{
var breite=myths[a].offsetWidth;
var inhalt=myths[a].innerHTML;
t+='<div class="myTH" style="position:absolute;left:'+offset_links
+'px;bottom:'+bottom+'px;width:'+breite+'px;height:'
+hoehe+'px;">'+inhalt+'</'+'div>';
offset_links+=breite;
}
t+='<br>';
bottom+=hoehe;
}
}
document.getElementById("fixeddiv").innerHTML=t;
}
}
function setHandler()
{
if (document.body && document.body.offsetWidth)
{
window.onmouseup = resizeFixeddiv;
window.onresize = resizeFixeddiv;
}
resizeFixeddiv();
}
</script>
</head>
<body onload="setHandler();" onmousemove="resizeFixeddiv()">
<table border="1" width="100%" cellpadding="0" cellspacing="0">
<thead id="mythead" >
<tr>
<th>Spalte1 mit langer Überschrift und gewolltem <br><i>Zeilenumbruch</i></th>
<th>Noch eine Spalte</th>
<th>Spalte2</th>
<th>Spalte3</th>
<th style="width:287px;">Spalte4</th>
<th>Spalte5</th>
<th>Spalte6</th>
<th>Spalte7</th>
<th>Spalte8</th>
<th>Spalte9</th>
<th>Spalte10</th>
</tr>
<tr>
<th>2.Zeile Spalte1</th>
<th colspan="2">2.Zeile Spalte2</th>
<th style="width:287px;">2.Zeile Spalte3</th>
<th>2.Zeile Spalte4</th>
<th>2.Zeile Spalte5</th>
<th>2.Zeile Spalte6</th>
<th>2.Zeile Spalte7</th>
<th>2.Zeile Spalte8</th>
<th>2.Zeile Spalte9</th>
<th>2.Zeile Spalte10</th>
</tr>
</thead>
<tbody>
<?php
// jetzt ein paar Dummy-Zeilen, damit wir scrollen käönnen
for ($a=0;$a<50;$a++)
{
echo "<tr>\n";
for ($x=0;$x<11;$x++)
{
echo "<td>".$a." --- ".$x."</td>\n";
}
}
?>
</tbody>
</table>
<br><br><br><br><br><br><br><br>
<div id="fixeddiv"></div>
</body>
</html>
Im Prinzip funktioniert das Script. Es gibt jedoch noch einige kleine Ungenauigkeiten und wie es mit der Browserkompatibilität
aussieht, ist mir auch noch nicht bekannt. Bei mir funktioniert es in IE6 und FF2. Ich veröffentliche das hier, um mit euch
gemeinsam meine rudimentären Javascriptkenntnisse durch eure Anregungen zu verbessern. Ich weiß ja, dass hier einige JS-Cracks
unterwegs sind.
Mein Ziel ist es also, meinen Ansatz mit euch gemeinsam zu verbessern, so dass wir ein allgemein einsetzbares Script erhalten,
welches aufgrund seiner einfachen Einbindung in bestehende Seiten seinen Weg in die Traumscript Ecke finden könnte.
Verbsserungswürdig sind aus meiner Sicht folgende Dinge:
- Im IE6 funktioniert bei mir bisher nur der Eventhandler "onmousemove" zuverlässig. Dieser wird aber so häufig aufgerufen,
dass das Div unnötig oft neu gezeichnet wird. Aus Programierersicht ist das eine Verschwendung von Rechenleistung.
Hier suche ich einen besser geeigneten Eventhandler.
- Im FF wird die Einschiebung nach links des Container-Divs berücksichtigt, so dass die generierten Spalten deckungsgleich
über den Tabellenspalten liegt. Im IE wird das ignoriert, so dass es hier zu einer Verschiebung kommt. Wie kann man das
sinnvoll anpassen?
- Das Script ermittelt Breite und Höhe der TH-Zellen. Erthält die Tabelle allerdings cellpadding-Angaben, so müssten
diese korrekterweise auch noch zur Breite und Höhe hinzuaddiert werden, was bisher nicht berücksichtigt wird.
Also spuckt mit mir gemeinsam in die Hände udn lasst uns das noch verbessern. Jede Anregung ist herzlich willkommen. Ich freue mich auf neue Erkenntnisse.
