HTML Tabellen übersichtlich gestalten mit jQuery
Donnerstag, 30. April 2009 | Autor: hp-profi
Wie jeder weiss, sind derzeit <code><tables/></code> nicht mehr angemessen. Dennoch gibt es Fälle, wo man auf Tabellen nicht ganz verzichten kann, letztlich wenn es sich schlicht und einfach um komplexe Daten handelt, oder wenn auch wie in einigen Fällen, dass HTML aus einer Maschine gedrückt wird, die Tabellen bevorzugt.
Nun kann es halt sein, dass man um eine HTML Tabelle nicht mehr herum kommt.
Mittels jQuery, ein gutes kompaktes Javascript Framework, und ein wenig CSS Angaben, kann man dann seiner nicht formatierten Tabelle eine gute Übersicht verleihen.
Hierzu benötigen wir zunächst das jQuery Plugin, um auf dieses Framework zuzugreifen.
Auf www.jquery.com kann man sich dieses herunterladen und in den Header, also zwischen <code><head></code> und <code></head></code> deines Dokumentes einbinden.
<code>
<script src=”DEINE_URL_JQUERY” type=”text/javascript”></script>
</code>
Damit wir nun unserer HTML Tabelle eigene Klassen hinzufügen können, müssen wir das Skript nach erfolgreichen Laden deiner Webseite initialisieren; Das bedeutet, dass alle Elemente vorhanden sein müssen, damit man auch diese Elemente über Javascript über die Dokumenten Struktur(DOM) ansprechen kann.
Dazu benötigen wir den folgenden Standard Aufruf:
<code>
<script type=”text/javascript”>
// Wenn das Dokument vollständig geladen wurde, wird die Funktion <code>$(document).ready(function()</code> ausgeführt:
$(document).ready(function(){
// Dem 1. tr aus dem table wird die Klasse ‚head’ zugewiesen
$(”table tr:first”).addClass(”head”);
// Hier wird allen geraden Zeilen die Klasse ‘odd’ zugewiesen
$(”table tr:even:not(.head)”).addClass(”odd”);
});
</script>
</code>
An dieser Stelle fügt dann das Javascript mittels DOM (Document Object Model) Manipulation dem HTML Element <code><table></code> Informationen hinzu.
In unserem Falle eine CSS Klasse dem Table Header (<code>$(”table tr:first”).addClass(”head”);</code>) und allen anderen geraden Zeilen(2,4,6,…) dieses hier: <code>$(”table tr:even:not(.head)”).addClass(”odd”);</code>
Nun hat man also seiner Tabelle Style Klassen hinzugefügt, welche man anschliessend mit untenstehendem Code formatieren kann:
CSS Beispiele:
<code>
tr.odd td {
background:#e4e4e4;}
tr.head td {
background:#666;
color:#fff;}
</code>
Somit sind wir in der Lage einen Tabellenkopf zu formatieren und jeder geraden Zeile der Tabelle z.B. eine andere Farbe zuzuweisen, um diese dann für die Lesbarkeit übersichtlicher zu gestalten.
Viel Spass dabei, wünscht Euch das CSS-Info Team
Mehr Infos gibt es in unserem CSS-Forum
Thema: css | Ein Kommentar
