2013-04-18 1 views
0

У меня есть таблица с альтернативной строки фонового цвета:Строки с исключением> наследуют цвет фона

tr:nth-child(even) {background: #FFF} 
tr:nth-child(odd) {background: #f4f4f4} 

В таблице состоит из двух типов клеток, «.main» и «.sub».

Я хотел бы, чтобы фоновый цвет чередовал все остальные «.main», в то время как все строки «.sub» получают цвет предыдущего «.main».

Было бы здорово, если бы решение было всем CSS, но открытым для jquery, если это действительно лучший способ.

Любые идеи?

<table> 
    <tr id='1' class='main'><td></td></tr> 
    <tr id='2' class='main'><td></td></tr> 
    <tr id='3' class='main'><td></td></tr> 
    <tr id='4' class='main'><td></td></tr> 
    <tr id='5' class='main'><td></td></tr> 
    <tr id='6' class='sub'><td></td></tr> 
    <tr id='7' class='main'><td></td></tr> 
    <tr id='8' class='main'><td></td></tr> 
    <tr id='9' class='sub'><td></td></tr> 
    <tr id='10' class='sub'><td></td></tr> 
    <tr id='11' class='main'><td></td></tr> 
</table> 

строки 1,3,5,8 должны быть # f4f4f4

строки 2,4,7,11 должно быть #fffff

и каждый .sub строка должна быть такой же цвет, как предыдущая строка.

(эти таблицы генерируются динамически, так что их размещение будет меняться)

EDIT: вот jsfiddle моей неудачной первой попытки с JQuery http://jsfiddle.net/xjDZm/

+0

Не могли бы вы предоставить образец HTML или, лучше, предоставить [скрипку] (http://jsfiddle.net)? – Passerby

+0

вот простой образец HTML. Я постараюсь, чтобы скрипка за секунду. Благодаря! – dsol828

+0

скрипт добавлен в OP ... это моя неудачная попытка с использованием jquery – dsol828

ответ

1

Я не думаю, что это возможно с чистый CSS, как вам кажется, нужно укладывать нечетные строки из .main, не нечетные строки и .main и :nth-child не может сделать это (вы не можете использовать (tr.main):nth-child(odd), не говоря уже о requi повторное использование с .sub еще более усложняет).

Так вот решение JQuery:

$("tr.main").filter(":even").css("background-color","#CCC");//change to #F4F4F4 
$("tr.main").filter(":odd").css("background-color","#FFF"); 
$("tr.sub").each(function(i,e){ 
    $(this).css("background-color",$(this).prev().css("background-color")); 
}); 

http://jsfiddle.net/xjDZm/1/

Извините, что я не использую JQuery, так что я не уверен, есть ли лучший способ кода. Я просто ищу документ API, чтобы найти методы, которые работают.

+0

Спасибо! Я не знаю, почему я не смог правильно получить jquery. Фильтрация на уровне jquery, похоже, делает трюк! – dsol828