Diese Scriptdatei enthält Funktionen, die dem Betrachter erlauben, Tabellenzeilen nach dem Inhalt von Spalten zu sortieren, indem er auf den Kopf einer Spalte klickt.
Das Skript setzt bestimmte Wörter in den class
-Attributen der sortierbaren Tabellen und der Köpfe der Spalten (table/thead/tr/td
) und passende Spalteninhalte voraus.
Beispiel:
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Sortierbare Tabelle</title> <script src = "tabsort.js" type = "text/javascript; charset=utf-8"/> <script type = "text/javascript"> onload = function () {tabsort_initialize ();} </script> </head> <body> <h1>Sortierbare Taelle</h1> <table class = "tabsort"> <thead> <tr> <td class = "date">Datum</td> <td class = "text">Typ</td> <td class = "number">Preis</td> </tr> </thead> <tbody> <tr> <td>01.11.2010</td> <td>Zweirad</td> <td>5.034,37</td> </tr> <tr> <td>08.02.2011</td> <td>Dreirad</td> <td>918,20</td> </tr> <tr> <td>17.02.2011</td> <td>Einrad</td> <td>17.003,46</td> </tr> </tbody> </table> </body> </html>
Die Funktion tabsort_initialize
macht alle Tabellen, deren Attributwert table/@class
das Wort "tabsort"
enthält, sortierbar, indem sie bestimmten Spaltenköpfen (table/thead/tr/td
) Behandlungsfunktionen für einen "Klick" zuordnet.
Die Funktion tabsort_makesortable
kann jede Tabelle sortierbar machen, aber die Funktion tabsort_initialize
ist vorzuziehen.
Die Zeilen einer sortierbaren Tabelle können nach dem Inhalt einer Spalte sortiert werden, wenn das Attribut table/thead/tr/td/@class
eines der Wörter number
, date
oder text
enthält.
number
In den Inhalten der Zellen der Spalte werden Punkte entfernt und Kommata durch einen Punkt ersetzt. Der so entstehende Zelleninhalt wird als Zahl (Dezimalzahl) interpretiert. Die Tabellenzeilen werden nach dem Zahlenwert sortiert.
date
Als Wert wird ein Kalenderdatum im Format "TT.MM.JJJJ
" erwartet. Die Tabellenzeilen werden nach der zeitlichen Anordnung der Kalenderdaten sortiert.
text
Die Tabellenzeilen werden alfabetisch nach dem Zelleninhalt sortiert.