Можно ли сделать раскраску таблицы по строкам чераз CSS

[Kvazi]

Можно ли сделать раскраску таблицы по строкам чераз CSS.

И ещё, кто нить встречал материалы по раскраске таблицы по строкам, с выделением при наведении и закреплении наведения при клике?

[Hubbitus]

Kvazi:
Можно ли сделать раскраску таблицы по строкам чераз CSS.
Только через CSS, с автоматическим чередованием - очень сомневаюсь. Вообще расскрасить конечно можно.

Kvazi:
И ещё, кто нить встречал материалы по раскраске таблицы по строкам, с выделением при наведении и закреплении наведения при клике?
В phpMyAdmin это реализовано, можно взять код оттуда.

[Psionic Vision]

Только на CSS - нельзя. А вот если добавить PHP - можно.

[RaZEr]

А зря вы думаете что зебру CSS не сделать...

Строки часто имеют одинаковую высоту. Поэтому рисуем картинку 1 на 36 (при строке в 18px высотой). Половину красим в один цвет, другую половину - в другой. Вешаем на table и радуемся изобретению велосипеда :)

[Ghost]

RaZEr
Ну эт и ежу понятно. Тока ведь нужно еще и менять цвета при MouseOver. Менять background-image? Но тогда ведь он будет меняться у всей таблицы... :(

[RaZEr]

Ну эт и ежу понятноМне показалось или ты ничего не предложил?

Чтобы не офтопить, - в тему:<table id="zebra">
<tr><td>123</td><td>456</td></tr>
<tr><td>123</td><td>456</td></tr>
<tr><td>123</td><td>456</td></tr>
<tr><td>123</td><td>456</td></tr>
<tr><td>123</td><td>456</td></tr>
</table>

<script>

function dozebra (id)
{
var table = document.getElementById(id);
if (table){
trs = table.getElementsByTagName('tr');
for (var i=0;i<trs.length;i++)
{
trs[i].style.backgroundColor = (i%2==0)?'eaeaea':'bbbbbb';
}
}
}

dozebra('zebra');

</script>

[Sheryld]

версия 0.2 :)


<table id="zebra">
<tr OnMouseOver="OnMouseOverHandler(this)" onMouseOut="OnMouseOutHandler(this)"><td>123</td><td>456</td></tr>
<tr ><td>123</td><td>456</td></tr>
<tr OnMouseOver="OnMouseOverHandler(this)" onMouseOut="OnMouseOutHandler(this)"><td>123</td><td>456</td></tr>
<tr ><td>123</td><td>456</td></tr>
<tr OnMouseOver="OnMouseOverHandler(this)" onMouseOut="OnMouseOutHandler(this)"><td>123</td><td>456</td></tr>
</table>

<script>

function dozebra (id)
{
var table = document.getElementById(id);
if (table){
trs = table.getElementsByTagName('tr');
for (var i=0;i<trs.length;i++)
{
trs[i].style.backgroundColor = (i%2==0)?'eaeaea':'bbbbbb';
}
}
}

function Swap(obj)
{
if (obj != null && obj.tagName == "TR")
{
//alert(obj.style.backgroundColor);
if (obj.style.backgroundColor == '#eaeaea')
{
obj.style.backgroundColor = '#bbbbbb';

for(j=0;j<obj.children.length;j++)
{
if (obj.children[j].tagName == "TD")
{
obj.children[j].style.backgroundColor = '#bbbbbb';
}
}

}
else
{
obj.style.backgroundColor = '#eaeaea';

for(j=0;j<obj.children.length;j++)
{
if (obj.children[j].tagName == "TD")
{
obj.children[j].style.backgroundColor = '#eaeaea';
}
}
}
}
}

function OnMouseOverHandler(obj)
{
Swap(obj);
}
function OnMouseOutHandler(obj)
{
Swap(obj);
}


dozebra('zebra');

</script>

[quaker]

я на пхп при выводе последовательном строк из базы (ну сами знаете и от 0 до пока не кончиться)
проверял челое ли число и деленное пополам
целое крашу таким цветом
нецелое крашу другим

правда там при наведении не менялись цвета
и в принципе это было без css сделано но по большому счету css туда пририсовать было бы не сложно я думаю

[Kvazi]

Всем спасибо, я наверно некорректно задал вопрос. Я хотел узнать как задав правила css применить расскраску к таблицам на странице.

Перерыл гору литературы и вот что нашёл:
_http://www.alistapart.com/articles/zebratables/ - статья на аглицком (не так интересна сама статья как её обсуждение)
_http://www.webmascon.com/topics/coding/40a.asp - её перевод на русский.
(не в обиду - там скриптик покрасивше будет)

А вот в обсуждениях нашёл что в css будут следующие правила:
tr:nth-child(even) and tr:nth-child(odd)

подробнее _http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

к сожалению только в третей версии спецификации css. Так что я просто забежал "поперед батько в пекло".