jQuery-Plugin: ConverTable

Aus der Reihe "Was ich mir schon länger mal anschauen wollte" heute die Folge "jQuery Plugins": Ich hab tatsächlich mal eins gebaut! Vorab: Ich bin weder jQuery- noch Javascript-Experte; ein solcher würde die Geschichte vermutlich ganz anders angehen. Das ist mir aber egal, ich bin mit dem Ergebnis meines converTable genannten Helferleins ganz zufrieden.

Zunächst mal das Plugin - einmal schön formatiert und einmal minimiert:

Ganz konkret geht es bei converTable darum, HTML-Tabellen in Definitionslisten umzuwandeln. Läse das hier jemand, ginge jetzt vermutlich schon das Semantik-Geschrei los, aber es wird wohl still bleiben. Und das ist auch gut so, zumal ich finde, dass solche Definitionslisten hier durchaus vertretbar missbraucht werden. Die Idee ist, alle Tabellenreihen, die mindestens ein <td>-Element enthalten, zu verarbeiten, wobei der Inhalt jeweils einer Zelle als Definitionsterm (<dt>) und die Inhalte der restlichen Zellen als je eine Definition(<dd>) herangezogen werden.

Die Auswahl der "Titelzelle" (also der späteren <dt>-Inhalte) ist dabei konfigurierbar. Ohne weitere Angaben wird entweder die erste Zelle mit dem Attribut class="title" oder die erste Zelle der Tabellenreihe gewählt, wenn keines mit der Klasse "title" gefunden wurde. Alternativ kann der auszuwertende Klassenname selbst festgelegt werden.

Nur übergroße Tabellen konvertieren: Schöne Sache für kleine Bildschirme

Darüber hinaus lässt sich einstellen, dass nur Tabellen konvertiert werden, die breiter als ihre Eltern-Elemente sind. Aus dieser Motivation ist das Plugin tatsächlich erst entstanden. Man kann ja seine Seiten mittlerweile dank der vielzitierten "responsive web design"-Technologien unter anderem auch ganz gut für Smartphones optimieren; es tritt dabei aber regelmäßig das Problem zu großer (also breiter) Tabellen auf, die den sichtbaren Bereich meilenweit überschreiten und so ein horizontales Scrollen erzwingen. In manchen Fällen nimmt man das zähneknirschend in Kauf, da hier die Vergleichbarkeit der einzelnen Spalten und Zeilen wichtiger ist, als der bequeme Gesamtüberblick; in anderen Situationen aber kann eine Re-Organisation der Daten in Listenform das Lesen deutlich angenehmer gestalten.

Hier aber erstmal ein Beispiel:

<script src="/js/plugins/jquery.toob.converTable.js" type="text/javascript"></script> <script> $(window).load(function() { // Breite Tabellen in Definitionslisten umbauen $("table.toBeConverted").converTable({ "oversizedOnly": true }); }); </script>

Hier wird das Plugin auf alle Tabellen mit der Klasse "toBeConverted" auf der jeweiligen Seite angewandt. Wichtig ist dabei, dass statt des sonst oft üblichen $(document).ready(function() {...}); hier $(window).load(function() {...}); genutzt wird. Erst dadurch scheint gewährleistet zu sein, dass die Breite aller Elemente (und damit auch der Elternelemente der möglicherweise zu breiten Tabellen) festeht und ausgewertet werden kann.

Übrigens ist true bereits der Standardwert der Eigenschaft oversizedOnly; auf diese Angabe könnte also verzichtet werden. Jetzt zum HTML-Teil:

<table class="toBeConverted"> <tr> <th>TH-1</th> <th>TH-2</th> <th>TH-3</th> </tr> <tr> <td>TD-1-1</td> <td class="title">TD-1-2</td> <td>TD-1-3</td> </tr> <tr> <td>TD-2-1</td> <td>TD-2-2</td> <td>TD-2-3</td> </tr> <tr> <td>TD-3-1</td> <td>TD-3-2</td> <td class="title">TD-3-3</td> </tr> </table>

...wird zu...

<dl class="toBeConverted"> <dt class="title">TD-1-2</dt> <dd>TD-1-1</dd> <dd>TD-1-3</dd> <dt class="title">TD-2-1</dt> <dd>TD-2-2</dd> <dd>TD-2-3</dd> <dt class="title">TD-3-3</dt> <dd>TD-3-1</dd> <dd>TD-3-2</dd> </dl>

Die HTML-Inhalte der jeweiligen Tabellenzellen werden dabei komplett weitergereicht; es werden also nicht nur die Texte übernommen.

Beschriftung der Listenwerte

In den Ursprungstabellen ist für jede Tabellenzelle durch die klare Zuordnung zu einer Spalte problemlos zu erkennen, welche Bedeutung der jeweilige Wert hat; in der Definitionsliste hingegen gibt es keine Überschriften für die einzelnen Listenelemente. Hier schaffen die Eigenschaften includeTermTitles und includeDefinitionTitles Abhilfe. Sind diese auf true gesetzt, werden den Werten der <dt>- bzw. <dd>-Elemente jeweils die Werte des data-title-Attributes der zu Grunde liegenden Tabellenzellen vorangestellt, falls dieses Attribut vorhanden ist. Beispiel:

<table class="toBeConverted"> [...] <tr> <td data-title="Spalte 1">TD-1-1</td> <td data-title="Spalte 2" class="title">TD-1-2</td> <td data-title="Spalte 3">TD-1-3</td> </tr> [...] </table>

...wird zu...

<dl class="toBeConverted"> [...] <dt class="title">Spalte 2: TD-1-2</dt> <dd>Spalte 1: TD-1-1</dd> <dd>Spalte 3: TD-1-3</dd> [...] </dl>

Übersicht der verschiedenen Plugin-Settings

termClass
Klasse der "Titelzellen" einer jeden Reihe; der Wert wird an das <dt>-Element weitergereicht (Standard: title)
definitionClass
Klasse für die Definitionselemente; darüber hinaus werden die Klassenbezeichnungen der zu Grunde liegenden Tabellenzellen ebenfalls weitergereicht
listClass
Klasse für die Ergebnisliste, auch hier wird die Klasse der ursprünglichen Tabelle zusätzlich weitergereicht (Standard: converted)
omitClass
Klasse für Tabellenzellen, die nicht berücksichtigt werden sollen (Standard: omit)
oversizedOnly
legt fest, dass nur Tabellen konvertiert werden, die breiter als ihre Elternelemente sind (Standard: true)
oversizedOffset
legt einen Wert fest, der auf die Breite der Elternelemente addiert wird, sodass ggf. auch übergroße Tabellen nicht konvertiert werden
includeTermTitles
legt fest, dass den Werten der <dt>-Elemente der Wert des data-title-Attributes der zu Grunde liegenden Tabellenzellen vorangestellt wird (Standard: false)
includeDefinitionTitles
legt fest, dass den Werten der <dd>-Elemente der Wert des data-title-Attributes der zu Grunde liegenden Tabellenzellen vorangestellt wird (Standard: false)
Letzte Änderung: 23. Mai 2012