Komfort mit HTML-Tabellen

von | 23. November 2007 | keine Kommentare |

Tags: ,

Werbung

Tabellen sind wichtige Struktur-Elemente für die Webseite. Neben ihrer mittlerweile verpönten Verwendung als Design-Hilfe dienen sie vor allem der Darstellung von numerischen oder kategorialen Daten. Um bei einer Präsentation der Fakten Hilfestellung zu geben, existieren im Internet eine ganze Reihe von Lösungen zum Filtern, Paginieren, Einfärben oder Scrollen der Tabelle. Wir wollen diese Techniken hier auch für den wenig erfahrenen Nutzer zugänglich machen.

Markup sparen
Ein Problem beim Erzeugen von HTML-Tabellen besteht in den vielen für die Erstellung der Tabelle notwendigen Markup-Tags. So verbraucht die folgende HTML-Tabelle für die Präsentation von 3 Zeilen und 4 Spalten bei 60 Textzeichen 150 Zeichen an HTML-Markup.

 HTML-Tabelle
 <table>
 <tr><th> head1 </th><th> head2 </th><th> head3 </th><th> head4 </th></tr>
 <tr><td> val1a </td><td> val2a </td><td> val3a </td><td> val3b </td></tr>
 <tr><td> val1b </td><td> val2b </td><td> val3b </td><td> val3c </td></tr>
 </table>

 Wiki-Tabelle
 <pre>
 head1 | head2 | head3 | head4 ||
 val1a | val2a | val3a | val3b ||
 val1b | val2b | val3b | val3c ||
 </pre>

Einfacher ist das Wiki-Markup. In obigem Wiki-ähnlichen Markup haben wir lediglich 15 Zeichen, das heißt ein Zehntel der für den HTML-Code benötigten Menge, verbraucht. Die Tabelle ist so gut lesbar, dass man sie eigentlich gar nicht weiter aufbereiten müsste.

Der Erfolg der Wikis ist auch in der einfachen Erstellung von Tabellen bei reduziertem Verbrauch an Markup-Zeichen begründet. Wir wollen diese Tabelle hier trotzdem mittels JavaScript-Code in eine HTML-Tabelle umwandeln, um später noch andere Plugins für die Tabelle anwenden zu können. Zu diesem Zweck erstellen wir nun ein Tabellen-Plugin zur Umwandlung von Wiki-Tabellen-Code in HTML-Code für die jsComponents. Die Verwendung des JSWikiTable-Plugins in der Webseite kann dann ohne eine Zeile von JavaScript-Code erfolgen.

JSWikiTable-Plugin
Das Einbinden eines jsComponents-Plugins erfolgt durch das Einschließen des betreffenden HTML-Bereiches mit einem Div-Element der Klasse JSPluginName und dem Bereitstellen einer JavaScript-Funktion mit dem gleichen Namen. Dieser Funktion wird durch die jsComponents automatisch das Div-Element als Parameter übergeben. Unser HTML-Code sieht demzufolge wie folgt aus:

 <div class="JSWikiTable">
 <pre>
 Markup | Erstellung | Lesbarkeit | Zeichen ||
 HTML | schwierig | gering | viele ||
 Wiki | leicht | hoch | wenig ||
 </pre>
 </div>

Der JavaScript-Code ist leicht verständlich. Innerhalb der Funktion JSWikiTable(element) wird nach dem pre-Tag gesucht und dessen Inhalt in der Variable cnt gespeichert. Durch Splitten dieses Textes in Zeilen- und Spalten-Arrays kann die HTML-Tabelle mittels Methoden des Document Object Models (DOM) erstellt werden. Wichtig ist dabei die Verwendung des tbody- und thead-Knotens, um die Tabelle auch im Internet Explorer anzuzeigen. Nach dem erfolgreichen Einhängen der neu erstellten Tabelle in das Dokument setzen wir die display-Eigenschaft unseres pre-Elementes auf none. Dadurch wird sichergestellt, dass ein Browser, der mit dem Verfahren Probleme hat, wenigstens die “Rohdaten” des Pre-Elementes anzeigt. Nun der JavaScript-Code unseres JSWikiTable-Plugins:

 function JSWikiTable (element) {
 var pre = element.getElementsByTagName("pre")[0];
 var cnt = pre.innerHTML;
 var table = document.createElement("table");
 table.className = "data";
 var tbody = document.createElement("tbody");
 var thead = document.createElement("thead");
 var x = 0 ;
 var lines = cnt.split(/\|\|/);
 for (var x = 0 ; x < lines.length; x++) {
 var tr = document.createElement("tr");
 var cols = lines[x].split(/\|/);
 for (var y = 0 ; y < cols.length;y++) {
 if (x == 0) {
 var th = document.createElement("th");
 th.appendChild(document.createTextNode(cols[y]));
 tr.appendChild(th);
 } else {
 var td = document.createElement("td");
 td.appendChild(document.createTextNode(cols[y]));
 tr.appendChild(td);
 }
 if (x == 0) {
 thead.appendChild(tr);
 } else {
 tbody.appendChild(tr);
 }
 }
 }
 table.appendChild(thead);
 table.appendChild(tbody);
 pre.parentNode.insertBefore(table,pre);
 pre.style.display = "none";
 }

Neben der jsComponents-JavaScript-Datei muss das neu erstelltes Plugin ebenfalls im Kopf der HTML-Datei geladen werden. Hier der vollständige HTML-Code unseres Beispiels jswikitable-code.html und das Beispiel selbst: jswikitable.html

Diagramme erstellen
In jedem modernen Tabellen-Kalkulationsprogramm werden die Daten einer Tabelle auch für die Erstellung von Diagrammen genutzt. Auch mit HTML- oder Wiki-Tabellen ist das möglich.

Screenshot

Wir verwenden die Werte der 2. Spalte (X) einer Tabelle im Wiki-Format um ein Balkendiagramm zu erzeugen. Unser Beispiel-HTML-Code:

 <div class="JSBarChart2">
 <pre>
 Row1 | 32 ||
 Row2 | 64 ||
 Row3 | 10 ||
 Row4 | 21 ||
 Row5 | 12 ||
 </pre>
 </div>

Im JavaScript-Code für das Plugin (jsbarchart2.js.html) werden die Werte der 2. Spalte in einen String der Länge X umgewandelt und dieser String wird in ein Code-Element eingefügt. Durch Auswählen eines monospaced-Fonts wird eine proportionale Wiedergabe der Text-Länge ereicht. Im CSS-Code werden desweiteren die Werte für background-color und color gesetzt. Beide sollten natürlich gleich sein, um den Text unsichtbar zu machen. Außerdem können noch die Eigenschaften für die CSS-Klassen td.max, td.min und td.middle auf unterschiedliche Farben gesetzt werden. Nachfolgend ein Beispiel-CSS-Code für unterschiedliche Farben:

 code.middle {
 background-color: #aaa;
 color: #aaa;
 }
 code.max {
 background-color: #faa;
 color: #faa;
 }
 code.min {
 background-color: #aaf;
 color: #aaf;
 }

Das Beispiel: jsbarchart2.html

Sortieren, Paganieren, …: Ein Framework wählen
Für unsere weiteren Beispiele existieren bereits leistungsfähige Implementierungen im Internet, die wir für unsere Zwecke benutzen werden. Besonders schön und leichtgewichtig ist das Tablesorter-Plugin von Christian Bach für das jquery-Framework. Im September hat John Resig, der jquery-Autor, eine Sammlung von jquery-Plugins als jquery-UI veröffentlicht. In diesem ist auch das Tablesorter-Plugin enthalten. Ein Vorteil des jquery-UI-Frameworks ist im Vergleich etwa zu dem hier kürzlich vorgestellten Yahoo User Interface (YUI), dass nur wenig JavaScript-Code notwendig ist, um die Komponenten zu initialisieren. Die Daten bleiben im HTML-Code, während bei den Beispielen der YUI-Komponenten zu beobachten ist, dass die Trennung von Code und Daten nicht realisiert wird. Die Daten für die Tabelle befinden sich bei den YUI-Beispielen im JavaScript-Code.

Zebra-Tabelle
Das Erstellen einer Zebra-Tabelle mit Hilfe des jquery-Frameworks ist einfach. Zwar erhält auch das Tablesorter-Plugin ein Zebra-Widget, aber, um die prinzipielle Arbeit mit dem jquery-Framework zu verdeutlichen, wollen wir unser Zebra-Plugin selbst erstellen. Unsere JSZebraTable-Klasse könnte kaum kürzer sein. Wir benutzen $-Funktion von jquery, um die HTML-Knoten zu speichern und die children-Funktion, um die notwendigen Elemente mittels CSS-Selektoren auszuwählen. Danach werden durch die addClass-Funktion den einzelnen Tabellen-Zeilen die Klassen odd und even zugewiesen.

 function JSZebraTable(element) {
 var table = $(element).children('table:first');
 var tbody = $(table).children('tbody:first');
 $(tbody).children('tr:odd').addClass('odd');
 $(tbody).children('tr:even').addClass('even');
 $(table).addClass('tablesorter');
 }

Für die Gestaltung der Tabelle benutzen wir die CSS-Styles des Blue-Themas des Tablesorter-Plugins, welches im Kopfbereich der HTML-Datei geladen wird. Das funktionierende Beispiel: jszebratable.html, beziehungsweise der HTML-Code: jszebratable-code.html .

Um das Einbinden der verschiedenen Plugins im Header-Bereich der HTML-Dateien zu erleichtern, haben wir die im Ordner jsc-plugins liegenden JavaScript-Dateien zu einer gemeinsamen Datei jstablecomponents.js vereinigt.

Sortieren
Dieses Gebiet fällt natürlich in den Zuständigkeitsbereich des Tablesorter-Plugins. Zwar exisitiert auch innerhalb des jsComponents-Frameworks ein Tabellensortierer, aber die Variante von Christian Bach ist wesentlich leistungsfähiger. Um eine Tabelle sortierbar zu machen, schließen wir die Tabelle einfach in ein Div-Element der Klasse JSSortTable ein. Im Kopfbereich müssen die entsprechenden JS-Dateien eingebunden werden. Der notwendige JavaScript-Code zur Implementierung ist auch hier minimal:

 function JSSortTable(element) {
 var table = element.getElementsByTagName("table")[0];
 $(table).addClass('tablesorter');
 $(table).tablesorter({widgets:['zebra']});
 }

Das Beispiel in Aktion jssorttable.html, sowie der HTML-Code jssorttable-code.html. Zum Sortieren der Tabelle klickt man einfach auf die Spaltenköpfe. Die Pfeile zeigen an, ob ab- oder aufsteigend sortiert wurde. Stören die Zebrasteifen, kann man einfach die Stylesheet-Eigenschaft für die entsprechenden Tabellenzeilen auf Weiß setzen: tr.odd td: { background-color: #fff; }.

Will man von den erweiterten Möglichkeiten des Plugins, wie zum Beispiel einer vordefinierten Sortierordnung, Gebrauch machen, muss man allerdings doch etwas JavaScript-Code schreiben. Hinweise dazu finden sich auf der Demo-Seite des Plugins.

Externe Dateien in HTML-Tabellen umwandeln
Wir wollen nun größere Datenmengen übersichtlich darstellen. Um den gleichen Datensatz in den Beispielen zu nutzen, ohne diesen immer wieder in die HTML-Dateien hineinkopieren zu müssen, werden wir eine Text-Datei anlegen, bei der die einzelnen Spalten durch Tabs voneinander getrennt sind. Mit Hilfe des jquery-Ajax-Requests laden wir diese Datei in unsere Webseite und wandeln die Daten ähnlich wie bei unserem JSWikiTable-Plugin in eine HTML-Tabelle um. Der Anfang unserer Beispieldatei students.tab

 Name Major Sex English Japanese Calculus Geometry
 Student01 Languages male 80 70 75 80
 Student02 Mathematics male 90 88 100 90
 Student03 Languages female 85 95 80 85
 Student04 Languages male 60 55 100 100

Damit wir die HTML-Tabelle später weiter verarbeiten können, setzen wir im Ajax-Request zum Laden dieser Datei den async-Parameter auf false. Dadurch wird sicher gestellt, dass die Tabelle komplett geladen ist, bevor wir weitere Komponenten auf die Tabelle anwenden. Nachfolgend der JavaScript-Code für unser JSAjaxTable-Plugin:

 function JSAjaxTable(element) {
 var id = element.getAttribute("targetid");
 var url = element.getAttribute("datasrc");
 var cnt = $.ajax({
 url: url,
 async: false
 }).responseText;
 var target = document.getElementById(id);

 var table = document.createElement("table");
 table.className = "tablesorter";
 var tbody = document.createElement("tbody");
 var thead = document.createElement("thead");
 var x = 0 ;
 var lines = cnt.split(/\n/);
 for (var x = 0 ; x < lines.length; x++) {
 if (!lines[x].match(/[a-zA-Z0-9]/)) { continue ; }
 var tr = document.createElement("tr");
 var cols = lines[x].split(/\t/);
 for (var y = 0 ; y < cols.length;y++) {
 if (x == 0) {
 var th = document.createElement("th");
 th.appendChild(document.createTextNode(cols[y]));
 tr.appendChild(th);
 } else {
 var td = document.createElement("td");
 td.appendChild(document.createTextNode(cols[y]));
 tr.appendChild(td);
 }
 if (x == 0) {
 thead.appendChild(tr);
 } else {
 tbody.appendChild(tr);
 }
 }
 }
 table.appendChild(thead);
 table.appendChild(tbody);
 target.appendChild(table);
 return ;
 }

Der HTML-Code zur Verwendung des Plugins ist kurz. Die entsprechenden JavaScript-Dateien werden im Head-Bereich geladen und durch die targetid und datasrc-Attribute werden die notwendigen Parameter an den Ajax-Request übermittelt.

 <div class="JSAjaxTable" targetid ="tableid" datasrc="students.tab"> </div>
 <div class="JSSortTable">
 <div id="tableid"> </div>
 </div>

Der komplette HTML-Code jsajaxtable-code.html und das Beispiel selbst jsajaxtable.html.

Paginieren
Größere Datensätze die nicht auf den Bildschirm passen, sollen häufig durch Vorwärts- und Rückwärts-Links zu navigieren sein. Man nennt dieses Verfahren auch Paginieren der Tabelle. Dazu verfügt der Tablesorter von Christian Bach über ein Pager-Plugin. Wir binden im Kopfbereich der HTML-Datei wieder die notwendigen JavaScript-Dateien und die CSS-Thema-Datei ein. Die Daten werden mit Hilfe des soeben beschriebenen JSAjaxTable-Plugins geladen und das Ziel-Element, in das die Tabelle eingefügt wird, wird von einem Div-Element der Klasse JSSortPagerTable eingeschlossen:

 <div class="JSAjaxTable" targetid="tableid" datasrc="students.tab"> </div>
 <div class="JSSortPagerTable">
 <div id="tableid"> </div>
 </div>

Der Code für die entsprechende JavaScript-Klasse jssortpagertable.js.html und das funktionierende Beispiel jssortpagertable.html.

Filtern
Noch wichtiger als Funktionen zum Paginieren oder Sortieren ist sicherlich das Filtern von Daten durch bestimmte Attribute. Leider gibt es dafür noch keine zufriedenstellende Lösung mittels eines jquery-Plugins. Wir verwenden deswegen den ausgezeichneten HTML Table Filter Generator von Max Guglielmi. Unser Plugin überprüft zuerst ob für die entsprechende Tabelle schon ein ID-Attribut existiert. Wenn dies nicht der Fall ist, wird ein solches für das Tabellen-Element generiert. Danach wird die Tabelle mittels der Funktion setFilterGrid(id); initialisiert.

 var JSFILTERTABLE_CNT = 0 ;
 function JSFilterTable(element) {
 var table = element.getElementsByTagName("table")[0] ;
 var id = "ftable"+JSFILTERTABLE_CNT ;
 JSFILTERTABLE_CNT = JSFILTERTABLE_CNT+1;
 if (element.getAttribute("id")) {
 id = "ftable"+element.getAttribute("id");
 }
 table.setAttribute("id",id);
 setFilterGrid(id);
 }

Der Benutzer der Webseite kann über den Spaltenköpfen Suchtext oder Ausdrücke wie “> 80″ eingeben und nach dem Betätigen der Enter-Taste wird der Datensatz anhand der eingegebenen Kriterien gefiltert. Hier der HTML-Code und das Beispiel.

Screenshot

Scrollen
Für das Scrollen von HTML-Tabellen existieren im Internet eine ganze Reihe von Implementierungen. Leider funktioniert die einfache Lösung, die CSS-Eigenschaft overflow für das Tbody-Element der Tabelle auf auto zu setzen, nur bei den Mozilla-Browsern. Der IE dagegen übernimmt die eigentlich für das gesamte Tbody-Element vorgesehene Höhe für jede Tabellenzeile und Opera ignoriert einfach die overflow-Angabe für das Tbody-Element. Das Beispiel jsscrolltable-moz.html.

 <style>
 div.JSScrollTable tbody {
 height: 400px;
 overflow: auto;
 }
 </style>
 </head>
 <body>

 <div class="JSAjaxTable" targetid="tableid" datasrc="students.tab"> </div>
 <div class="JSScrollTable">
 <div id="tableid"> </div>
 </div>

Komplexere CSS-Ansätze wie der von Stu Nicholls haben den Nachteil, dass die Spaltenbreite vorher für jedes Th-Element definiert werden muss. Außerdem muss zuviel spezifischer, nur für die konkrete Tabelle nutzbarer CSS-Code geschrieben werden. Nicholls zeigt uns aber einen Weg, um unser Ziel einer scrollbaren Tabelle zu erreichen. Wir bedienen uns dazu eines weiteren kleineren jquery-Plugins. Das Scrollbare HTML-Tabellen-Plugin unterstützt neben den Mozilla-Browsern auch den Internet Explorer. Durch das Erweitern des Plugins für den Opera-Browser mittels Umschreiben des oben erwähnten CSS-Codes in JavaScript-Code erreichen wir, dass unsere Tabelle auch in diesem Browser gescrollt werden kann. Das in allen drei Browsern funktionierende Beispiel jsscrolltable.html

Weitere Tabellen-Plugins
Für das jquery-Framework existieren im Internet weitere leistungsfähige Plugins. Ein Beispiel dafür ist Ingrid. Neben der Möglichkeit des Scrollens, können die Tabellen-Daten auch serverseitig sortiert und paginiert werden. Weitere jquery-Plugins für Tabellen sind sicherlich eine gute Anlaufstelle, falls nach diesem Artikel noch Luxus-Wünsche offen bleiben.

Zusammenfassung
Die vorgestellten Lösungen zum komfortablen Darstellen von HTML-Tabellen sind einfach in die eigene Webseite einzubinden und lassen sich in vielen Fällen auch miteinander kombinieren. Der gesamte JavaScript- und HTML-Code kann hier heruntergeladen werden: drweb-luxus-mit-tabellen-beispiele.zip. Hinweise und Vorschläge zum Artikel bitte wie üblich an . ™

Erstveröffentlichung 23.11.2007

Weitere Beiträge:

Über Dr. Detlef Groth

Dr. Detlef Groth, von Beruf Biochemiker und IT-Konsultant, arbeitet als Bioinformatiker und Autor in Potsdam und Umgebung.
Alle Beiträge von Dr. Detlef Groth ansehen →

,

Noch keine Kommentare vorhanden!

Hinterlasse eine Antwort

Bitte bei weiteren Kommentaren per Email benarichtigen! Auch möglich: Abo ohne Kommentar.

Spam protection by WP Captcha-Free