Unter dem Begriff "Zebra" verstehen die n-Färbung der Zeilen in einer Tabelle oder Liste. So stark die Verbesserung der Lesbarkeit und Verständlichkeit, insbesondere bei langen Tabellen oder Listen. Das Papier hält verschiedene Beispiele, wie man erreichen Farbe jeder zweiten Zeile mit Hilfe von verschiedenen Methoden und Techniken - css, CSS3, jquery un smarty.
1. Die Verwendung von CSS für statische Tabelle:
table tr.even td {
background: #cacaca;
}
<table> <thead> <tr> <th>Header</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum dolor sit amet</td> </tr> <tr class="even"> <td>Lorem ipsum dolor sit amet</td> </tr> ... </table>
2. Mit CSS 3
table tr:nth-child(even) {
background-color: #cacaca;
}
<table> <thead> <tr> <th>Header</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> </tr> ... </table>
Funktioniert nicht in IE8, 7,6
3. Hilfe von JavaScript und jQuery-Bibliothek.
.even {
background: #cacaca;
}
$(document).ready(function(){
$("tr:even").addClass("even");
});
4. Mit JavaScript und jQuery-Bibliothek. Das Skript wird immer komplexer.
$(document).ready(function(){
$('table tr').each(function(i, it){
if(i % 2 == 0) {
$(this).addClass('even');
}
})
});
Seriennummer des Artikels (row) teilen und in Abhängigkeit von der Anwesenheit oder Abwesenheit von Rückständen (Operator%), definiert er gerade oder ungerade Zeilen. Dementsprechend hat die geraden Zeilen an die Klasse von "selbst", das bietet die Color Line.
5. PHP Smarty Template-System.
<table>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
{foreach from=$items item=item name=foo}
<tr {if $smarty.foreach.foo.index % 2}class="even"{/if}>
<td>Lorem ipsum dolor sit amet</td>
</tr>
{/foreach}
</tbody>
</table>
Wir sehen einen ähnlichen Mechanismus wie die im vorherigen Beispiel gesehen - ist die laufende Nummer durch 2 teilbar, und je nach Vorhandensein oder Fehlen von Gleichgewicht bestimmt wird, ist es gerade oder ungerade aufzeichnen. Klasse direkt in die Vorlage aufgenommen. Diese Methode generisch ist zunächst, wie es Tabellen dynamisch gewachsen ist.
6. PHP Smarty Template-System. Das Skript für den Komplex.
{counter assign=k start=0}
{foreach from=$items item=item name=foo}
{math equation="n % 2" n=$k assign="nth"}
<tr {if $nth}class="even"{/if}>
<td>Lorem ipsum dolor sit amet </td>
</tr>
{counter}
{/foreach}
In diesem Fall ist die laufende Nummer inkrementiruetsya jedem Aufruf der Betreiber - zu begegnen. Nützlich in Fällen, in denen die laufende Nummer des Zyklus aus irgendeinem Grund nicht verwendet werden können. Zum Beispiel werden vor dem Erstellen der HTML-Einträge im Vergleich (kein Eintrag leer, etc.)
Verwendete Quellen:
- http://www.smarty.net/
- http://www.quirksmode.org/css/nthchild.html
