Полосатые таблицы
Февраль 17, 2006
“Повторение - мать учения” – основная причина написания этой заметки. Внимательный читатель сразу же может заметить мол сколько можно, тема раскрыта и точка, надоели повторы, практически то же самое скорее всего можно почитать тут (en), тут (рус) и тут (рус), а также додуматься самому при возникновении необходимости в сабже. Но я считаю, что соотношения пользы нижеизложенного кода к размеру в байтах так велико, что лучше прочитать еще раз, выучить наизусть, найти все баги, и в конце-концов повесить в рамочку под стеклом. Javascript now works, и пока так есть, надо этим интенсивно пользоваться.
Для того чтобы получить полосатую таблицу, возьмем не полосатую, например такую:
<table id="tab1">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
</tr>
</thead>
<tbody>
<tr><td>Cell11</td><td>Cell12</td><td>Cell13</td></tr>
<tr><td>Cell21</td><td>Cell22</td><td>Cell23</td></tr>
<tr><td>Cell31</td><td>Cell32</td><td>Cell33</td></tr>
<tr><td>Cell41</td><td>Cell42</td><td>Cell43</td></tr>
<tr><td>Cell51</td><td>Cell52</td><td>Cell53</td></tr>
<tr><td>Cell61</td><td>Cell62</td><td>Cell63</td></tr>
<tr><td>Cell71</td><td>Cell72</td><td>Cell73</td></tr>
<tr><td>Cell81</td><td>Cell82</td><td>Cell83</td></tr>
<tr><td>Cell91</td><td>Cell92</td><td>Cell93</td></tr>
</tbody>
</table>
Сразу же обращаем внимание, что таблица имеет id, он нужен для того чтобы ее можно было найти среди множества таблиц, потенциально имеющихся на странице. Что особенно актуально для т. н. “табличников” и менее актуально для “анти-табличников”. тут они как-то встретились 
.
Далее, заметим, что таблица разделена на thead и tbody. Это не обязательно, но так все же лучше с любой точки зрения. Именно tbody и станет скоро полосатой.
Для придания таблице полосатости служат такие строчки в CSS-файле:
tbody .odd {
color: #000;
background-color: #efe;
}
tbody .even {
color: #000;
background-color: #eef;
}
Все что нам осталось – взять нашу таблицу, и присвоить классы ее строкам в зависимости от того, четная это строка или нет. Этим за нас может сделать JavaScript:
function makeStripe(tab)
{
var rows = tab.getElementsByTagName("tr");
if (!rows)
return;
for(var i=0; i<rows.length; i++)
rows[i].className = ((i%2)==0 ? "odd" : "even");
}
Например, вот так можно его вызвать (хотя это и не лучший способ):
<body onload="makeStripe(document.getElementById('tab1'));">
Все это вместе можно посмотреть здесь.
Матерые php или perl программисты могут возразить, зачем морочить себе голову этим ДжаваСкриптом, он конце-концов может быть отключен у пользователя, проще и надежнее раздавать классы строкам на сервере, когда таблица генерируется из БД, например. Но зато при использовании ЖС скрипта, указанного выше, уменьшается размер HTML кода, который передается с сервера, и как следствие ускоряется загрузка страницы, в то время как скрипт сам кешируется. А более-менее новые компьютеры способны раскрашивать довольно большие таблицы практически мгновенно.
P.S. Мне бы очень хотелось, чтобы этот скрипт работал во всех браузерах, если в каком-то браузере будут глюки, пишите, я постараюсь найти выход. Сам код тестировался в ИЕ6, 5.5, 5, ФФ 1.5, Опере 8.51, 7.5 (в последней с небольшими артефактами в последней строке).
Февраль 23rd, 2006 в 5:20 pm
[…] Блог « Полосатые таблицы […]
Ноябрь 7th, 2006 в 12:26 am
полезно!
Ноябрь 19th, 2006 в 8:27 pm
[…] Полосатость таблицы. […]
Февраль 4th, 2007 в 4:10 pm
[…] Весьма уместным дополнением может стать полосатая раскраска таблицы. О том, как можно делать полосатые таблицы я уже когда-то писал. Оказывается, к предыдущему примеру добавить полосатость очень просто. Добавляется (Element.addClassName из библиотеки Prototype) CSS класс even, который присваивается непарным строкам таблицы. А потом CSS класс selected при выделении применяется ко всем строкам таблицы (tr.selected) и "even" строкам (tr.even.selected), чтобы установить цвет выделения "поверх" цвета полос таблицы. […]