Über mich

Startseite arrow Tipps & Tricks arrow Zeilen in Tabellen mit PHP abwechselnd stylen (even, odd)

Zeilen in Tabellen mit PHP abwechselnd stylen (even, odd)

Mittwoch, 12. August 2009
Geschrieben von Armin Vieweg
Wer kennt sie nicht: Tabellen, in der sich die Hintergrundfarbe jeder Zeile abwechselnd ändert. Um das Umzusetzen braucht man CSS3 oder dieses kleine PHP-Script, dass auf "Simple HTML DOM Parser" zurückgreift.

Erst kürzlich habe ich in einem ausführlichen Artikel die PHP Klasse "Simple HTML DOM Parser" vorgestellt, mit der man wie in jQuery sehr komfortabel HTML-Code ändern kann.

Dieser Artikel setzt den Vorherigen als Basis voraus, daher empfehle ich erst den Simple HTML DOM Parser Artikel zu verinnerlichen, bevor wir auf das folgende Praxis-Beispiel näher eingehen.



Grafisch hochwertige Tabellen
Eine nett anzusehende Tabelle könnte zum Beispiel so aussehen:

Hübsche Tabelle

Dieses Bild ist aus einem vorherigen Artikel von Professor Web, in dem ich auf das kleine JavaScript Tablecloth eingegangen bin, dass das was wir jetzt mit PHP machen schon mit JavaScript umgesetzt hat.

Der Vorteil es mit PHP zu machen ist, dass kein JavaScript benötigt wird und der Aufwand verhältnismäßig gering ist.


Der Grund-Code
Wenn wir den Simple HTML DOM Parser eingebunden und den Quellcode der Seite, der gleich ausgegeben werden soll, in eine entsprechende Variable geladen haben, können wir mit dem eigentlichen Script anfangen.

Hier nochmal kurz der Quellcodeauszug um den Parser einzubinden und den Code in die Variable $inhalte zu laden. Wie das genau funktioniert findet Ihr im Artikel, den ich eingangs verlinkt habe.

require_once($_SERVER["DOCUMENT_ROOT"] . "/inc/simple_html_dom.php");
$inhalte = str_get_html($inhalte);



Der Haupt-Code

foreach($inhalte->find('table') as $e) {
    foreach($e->find('tr') as $f) {
        if($i == 0) $f->class .= ' first';
        if($i % 2 == 0) {
            $f->class .= ' odd';
        }
        else {
            $f->class .= ' even';
        }
        $i++;
    }
    unset($i);
}





Erklärung
Wir durchsuchen hier den Quellcode zuerst nach allen Tabellen die vorhanden sind. Danach alle TR (Table Row) innerhalb der jeweiligen Tabellen. Wir müssen es in zwei Schleifen aufteilen, da ansonsten nicht mehr differenziert werden kann ob sich das nächste gefundene TR noch in der 1. oder vielleicht schon in der 2. Tabelle befindet.

Die erste If-Abfrage identifiert anhand der Laufvariable $i ob es das erste TR der aktuellen Tabelle ist. Wenn dem so ist, wird dem TR die Klasse "first" zugewiesen.

In der zweiten If-Abfrage wird geklärt ob das aktuelle TR gerade (even) oder ungerade (odd) ist. Dafür verwenden wir den Operator %. Wir teilen also die Laufvariable durch 2 und erhalten nicht den geteilten Wert, sondern den Restwert.

3 geteilt durch 2 - der Restwert ist 1 - d.h. ungerade
4 geteilt durch 2 - der Restwert ist 0 - d.h. gerade
usw...

Egal mit welcher Zahl wir das machen. Der Restwert ist immer 1 oder 0 und das können wir dann super in einer IF-Abfrage nutzen um die entsprechende CSS-Klasse hinzuzufügen.

Da die Laufvariable bei 0 und nicht bei 1 beginnt sind die Klassen "even" und "odd" scheinbar verkehrt herum aufgeführt - so wird jedoch das korrekte Ergebnis angezeigt. Die 1. Zeile (Zahl 1 = ungerade) erhält somit die Klasse "odd" und dies wird abwechselnd mit "even" fortgeführt.

Sind alle TR der ersten Tabelle durchgelaufen endet die innere foreach-Schleife und die Variable $i wird wieder auf 0 gesetzt. Dann beginnt das Spiel mit der nächsten Tabelle die gefunden wird.


Modifikation
Man kann nach Belieben die erste Zeile des Scriptes anpassen um nur Tabellen aufzuführen die bestimmte Kriterien erfüllen. Beispielsweise sollen nur Tabellen bearbeitet werden die sich im DIV mit der id="content" befinden. Dann würde die erste Zeile so aussehen:

foreach($inhalte->find('div#content table') as $e) {





Das passende CSS
Ist das Script eingebunden und wird der Quellcode ausgegeben können wir die Klassen .even, .odd und .first nach Belieben im Stylesheet definieren.

Um ein vergleichbares Ergebnis wie im Screenshot oben zu erzielen würden wir also folgendes schreiben:

tr.odd {
  background-color:#f8fbfc;
}

tr.even {
  background-color:#e5f1f4;
}

tr.first {
  background-color:#328aa4;
  color:#fff;
  font-weight:bold;
}


Übrigens: Die erste Zeile in der Tabelle hat die Klassen "first" und "odd". Das kann je nach Aufbau des Stylesheets wichtig sein.

Dies ist ein Beispiel, wie wir den Simple HTML DOM Parser sinnvoll in der Praxis einsetzen können. Ein Weiteres, dass sich mit Links befasst, wird demnächst folgen.

Basiswissen: Simple HTML DOM Parser




Der Artikel hat übrigens die glatte ID=300 in meinem Blog :)




  Kommentare (6)
 1 Geschrieben von: Stefan Klose (Webdesign aus Wi, am 04.01.2010 um 17:07
Falls PHP mal nicht vorliegt oder man dafür sonstwo in ein CMS einsteigen müsste - jQuery tuts auch: 
 
$('table.class tr:even').addClass('ungeradeZeile'); 
 
Das finde ich persönlich als Einzeiler doch ganz nett.
 2 Geschrieben von: Armin Vieweg, am 04.01.2010 um 17:57
Stimmt. Dann mach aber noch ne Einschränkung im Selektor auf den tbody. Denn der Table-Head, der ja durchaus hin und wieder existiert, soll ja in der Regel ein eigenen Style haben. 
 
$('table.class tbody tr:even').addClass('ungeradeZeile');  
 
Aber vielen Dank für die Ergänzung! :) 
Gruß 
Armin
 3 Geschrieben von: Mike, am 04.07.2010 um 08:07
Mit CSS 3 geht das noch viel einfacher:  
tr:nth-child(even) { 
background-color: #FFFF00; 

 
tr:nth-child(odd) { 
background-color: #FFCCCC; 
}
 4 Geschrieben von: Armin Vieweg, am 04.07.2010 um 17:30
Ja, aber CSS3 wird im Internet Explorer nicht unterstützt. Und bis die Browser die kein CSS3 können ausgestorben sind, wird noch viel Wasser den Rhein lang fließen - wie man hier im Rheinland sagt ;-) 
 
Gruß 
Armin
 5 Geschrieben von: Thomas Kekeisen, am 09.07.2010 um 00:59
Noch perverser geht es übrigens auch so: 
 
tr td { background: red; } 
tr + tr td { background: yellow; } 
tr + tr + tr td { background: red; } 
tr + tr + tr + tr td { background: yellow; } 
 
Grüße
 6 Geschrieben von: Armin Vieweg, am 09.07.2010 um 08:10
Die sogenannten "Adjacent sibling selectors" werden im IE6 leider nicht unterstützt.
Letzte Aktualisierung ( Donnerstag, 19. November 2009 )
 
Weiter >