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

IMHO.WS (https://www.imho.ws/index.php)

- Веб-программирование (https://www.imho.ws/forumdisplay.php?f=29)

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

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

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

Цитата:

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

Только через CSS, с автоматическим чередованием - очень сомневаюсь. Вообще расскрасить конечно можно.

Цитата:

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

В phpMyAdmin это реализовано, можно взять код оттуда.

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

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

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

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

Цитата:

Ну эт и ежу понятно

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

Чтобы не офтопить, - в тему:

Код:

<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>

версия 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>

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

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

Всем спасибо, я наверно некорректно задал вопрос. Я хотел узнать как задав правила 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. Так что я просто забежал "поперед батько в пекло".