Под словосочетанием «зебра» понимают окраску n-той строки в таблице или в списке. Таким образом значительно улучшая читабельность и восприятия информации, особенно в длинных таблицах или списках. В статье рассмотрены разные примеры как достичь окраску каждой второй строки используя разные приемы и техники - css, css3, jquery un smarty.
1. Используя CSS для статической таблицы:
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. Используя CSS3
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>
Не работает в IE8,7,6
3. Используя javascript и jQuery библиотеку.
.even {
background: #cacaca;
}
$(document).ready(function(){
$("tr:even").addClass("even");
});
4. Используя javascript и jQuery библиотеку. Сценарий по сложнее.
$(document).ready(function(){
$('table tr').each(function(i, it){
if(i % 2 == 0) {
$(this).addClass('even');
}
})
});
Порядковый номер элемента (строки) делиться и, в зависимости от наличия или отсутствия остатка (% оператор), определяется это четные или нечетные строка. Соответственно, четным линиям добавляется класс "even ", который обеспечивает окраску строки.
5. Используя PHP систему шаблонов Smarty.
<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>
Мы видим, механизм похож рассмотренному в предыдущем примере - номер последовательности делится на 2, и в зависимости от наличия или отсутствия остатка определяется, это четная или нечетная запись. Класс добавляется непосредственно в шаблон. Этот метод универсальнее первого, так, как он может обрабатывать таблицы динамически.
6. Используя PHP систему шаблонов Smarty. Сценарий по сложнее.
{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}
В этом случае, номер последовательности инкрементируеться при каждом вызове оператора - counter. Полезно в случаях, когда номер последовательности цикла по какой-то причине не может быть использована. Например, перед созданием HTML записи производиться сравнение (не является запись пустой и т. д.)
Использованные источники:
- http://www.smarty.net/
- http://www.quirksmode.org/css/nthchild.html
» Комментарии