wie man Zeilen abwechselnd einfärben kann

wie man Zeilen abwechselnd einfärben kann

Ein häufig genutztes Darstellungsverfahren ist das abwechselnde Einfärben von Tabellenzeilen oder Listeneinträgen. Eine Möglichkeit, wie sich das umsetzen lässt möchte ich in diesem Artikel vorstellen.

Wir haben eine Liste von Daten, die wir gern tabellarisch darstellen und zur besseren Lesbarkeit noch abwechselnd einfärben möchten. Am besten noch so, dass diejenige Zeile über der sich der Cursor befindet auch noch unterscheidet.

Erstmal die Daten:

Listing 1

$titles = array(
'Vorname',
'Name',
'e-Mail',
);
$zeilen = array(
array('Adela', 'Wallin','AdelaWallin@example.com'),
array('Seijun','Ooba','SeijunOoba@example.com'),
array('Donatien','Durepos','DonatienDurepos@example.com'),
);

Der Tabellencode

Die Tabellenköpfe kann man natürlich auch hartcodiert erzeugen, aber auf diese Weise besteht später auch noch die Möglichkeit ohne sehr großen Aufwand die Tabelle zu Lokalisieren.

Ich denke, ich kann davon ausgehen, dass der Aufbau von Schleifen bekannt ist. Daher werde ich zu dem Thema nicht viele Worte machen.

Listing 2

    <table>
        <tr>
            <?php foreach($titles as $title): ?>
            <th><?php echo htmlentities($title); ?></th>
            <?php endforeach; ?>
        </tr>
        <?php foreach($zeilen as $n => $zeile): ?>
        <tr class="<?php echo $n%2?'gerade':'ungerade' ?>" >
            <?php foreach($zeile as $spalte):?>
           <td><?php echo htmlentities($spalte); ?></td>
           <?php endforeach; ?>
       </tr>
       <?php  endforeach; ?>
   </table>

Zeile 7 könnte man auch anders aufbauen indem man einfach eine Zählvariable mitlaufen lässt, aber das ist durch die Datenstruktur nicht nötig, da jede Zeile ohnehin schon ihren eigenen Zähler mitbringt, den numerischen Schlüssel.

Zeile 8 ist dafür verantwortlich, dass die css Klasse der Zeile immer abgewechselt wird. Durch die Rechnung „Zähler modulo 2“ wird immer entweder 1 oder 0 zurückgegeben, was im PHP Kontext true und false repräsentiert.

Die CSS Deklaration hierfür würde so oder ähnlich aussehen:

Listing 3

tr.gerade td{
background-color: silver;
}
tr.ungerade td{
background-color: white;
}

Mouseover Effekt

Bisher sind die Zeilen nur abwechselnd eingefärbt. Kommen wir nun zur interaktivität mit der Maus.

Man kann diesen Effekt direkt in das tr element einbauen, aber wenn es dazu kommt, dass man die css Klassen umbenennen muss oder ähnliches ist ein script tag oder eine externe .js Datei wartungsfreundlicher.

Listing 4

var klasse = '';
function setActive(e){
klasse = e.className;
e.className = 'aktiv';
}
function setInactive(e){
e.className  = klasse;
}

Der Tabellencode muss jetzt noch ein wenig erweitert werden um auf den Mauscursor zu reagieren.

Listing 2.1

...
<;tr  onmouseover="setActive(this)" onmouseout="setInactive(this)">
...

Außerdem brauchen wir jetzt noch eine neue css klassendefinition um das ganze auch optisch abzuheben.

Listing 3.1

tr.aktiv td{
background-color: blue;
}

Erweiterungsmöglichkeiten

Je nachdem mit welchem Wert man den aktuellen Zähler modulo berechnet kann man beispielsweise auch dafür sorgen, dass sich die Tabellenköpfe alle x Zeilen wiederholen. Hierfür muss man nichts weiter tun als die Kopfschleife in die Zeilenschleife zu integrieren und diese nur auszugeben wenn der Zähler modulo x genau 0 ergibt.

 css HowTo modulo php