Таблицы в полоску
13 Dec, 2004Давненько уже на ALA была статья про "Полосатые таблицы". Решил поделиться маленькой хитростью которую подсмотрел там же в обсуждении статьи.
Что было
В оригинальной статье использовался довольно немаленький (по меркам современного веба) скрипт. Этот скрипт искал таблицу и потом определенным ячейкам присваивал фоновый цвет. Причем этот скрипт не работал в старых ИЕ(5.0, 5.5) поскольку они не поддерживали такое присвоение.(у меня по крайней мере не заработало).Присвоение же цвета агрументировалось экономией имени класса.(ИМО абсолютно не нужной). перевод статьи можно почитать здесь: Полосатые таблицы
Другие пути
Порывшись на ALA в обсуждении этой статьи, я обнаружил несколько намного более изящных путей для решения проблемы.Путь первый: универсальный
Идея первого пути почти такая же в оригинале. Но теперь мы присваиваем не фоновые цвета для каждой ячейки, а классы для строк. Вот собственно скрипт:
function stripe(id) {
var table = document.getElementById(id);
if (! table) { return; }
var trs = table.getElementsByTagName('tr');
for (var i = 0; i < trs.length; i += 2) {
trs[i].className += ' even';
}
}
Где вместо ID нужно подставить ID будущей "зебры".
Лично я, для раскраски нескольких таблиц, использую такую конструкцию:
/*Running onLoad Scripts*/
function runScripts()
{
stripe('price');
stripe('price-a');
stripe('price-b');
stripe('price-d');
}
window.onload = runScripts;
Ну и естественно, так как скрипт лишь расставляет лишь класс для строк без CSS тут не обойтись:
#price tbody tr.even td {
background-color: #edf3fe
}
Таким образом на любой странице этим подключенным скриптом будут раскрашены таблицы с id price,price-a,price-b,price-d.
Пример можно посмотреть по адресу: http://cssing.iatp.org.ua/examples/melos/table.html
Второй путь: НЕуниверсальный
Это решение наверно можно назвать реализацией CSS3 в ИЕ. Работает это естественно только для ИЕ. :( Но уж больно симпатичное и изящное оно. Для полосатых таблиц достаточно добавить в CSS вот такую строку:
.zebra tr {
background: expression(this.rowIndex%2 == 1?'#F0F0F0':'#FFF');
}
Все таблицы класса .zebra будут полосаты в ИЕ.
Само собой
Для того что бы работал скрипт, надо что бы структура таблиц была примерно такая:
<table id='playlist'>
<tbody>
<tr class='odd'>
...
</tr>
</tbody>
</table>
Ну и для красоты рекомендую сразу поставить cellspacing="0" для всех таблиц которые вам нужны полосатыми.
В обсуждении были еще методы. Но первый был лучшим, а второй занятным. Что и определило мой выбор.
3 комментариев к “Таблицы в полоску”