Применить :nth-child() только к видимым блокам таблицы

#css

Вот это кусок кода форматирует таблицу по типу зебры:



#calc tr:nth-child(2n) {
  background: #f0f0f0; /* Цвет фона */
}

#calc tr:nth-child(2n + 1) {
  background: #666; /* Цвет фона */
  color: #fff; /* Цвет текста */
}

  

    
Кол-во трубы на ворота
    

  

  

    
Кол-во трубы на рамку ворот
    

  

  

    
Кол-во трубы на калитку
    

  

  

    
Кол-во трубы на что-то ещё
    

  





Но есть одна проблема: если в таблице присутствуют поля со свойством display:none,
то вышеуказанные стили так же применяются к ним, в итоге зебра получается неправильной.  

То есть, получается так:
1 - это белый,
2 - серый (display: none),
3 - белый,
4 - серый, и т.д.  

В итоге, выводятся 2 белых поля подряд.  

Как сделать, чтобы nth-child применялся только для видимых полей?
Возможны и другие решения.  

P.S. display:none применяется динамически.
    

Ответы

Ответ 1

Если все строки однострочные и не требуется менять цвет шрифта, можно использовать
repeating-linear-gradient, но следует обратить внимание на плохую поддержку браузерами.



table {
  line-height: 2em;
  background: repeating-linear-gradient(silver 0, silver 2em, antiquewhite 2em, antiquewhite
4em);
  border-collapse: collapse;
}

td, th {
  padding-top: 0;
  padding-bottom: 0;
}

  

    
Кол-во трубы на ворота
    

  

  

    
Кол-во трубы на рамку ворот
    

  

  

    
Кол-во трубы на калитку
    

  

  

    
Кол-во трубы на что-то ещё
    

  



Ответ 2

nth-child и nth-of-type считают по номеру в дереве элементов. Им всё равно, какие
у элементов стили, потому что номер элемента от этого не меняется. 

Следовательно, чтобы воспользоваться nth-of-type, надо динамически менять тип элемента.
Например, tr на div и обратно.

В коде для наглядности строки не исчезают. Чекбоксы окрашивают их в серый цвет и
исключают из зебры. Если снять галку в чекбоксе, строка вернётся обратно в зебру.

Чтобы решить поставленную в вопросе задачу, надо заменить 
 на 
.



$(function (){
  $('input:checkbox').click(function () {
    // Хотим менять tr на div и обратно. 
    // Для этого будем заворачивать ячейки то в tr, то в div.
    // Чтобы не потерять ячейки, которые стоят в одном ряду с чекбоксом, 
    // сначала накручиваем новую обёртку поверх старой:
    if ($(this).prop('checked')) {
      $(this).parent().parent().wrap('
');
    }
    else {
      $(this).parent().parent().wrap('');
    }
    // а потом уже выкидываем старую упаковку:
    $(this).parent().unwrap();
  });
});
#calc tr { display: block; }
#calc tr:nth-of-type(2n) { background: #ff6; }
#calc tr:nth-of-type(2n+1) { background: #6ff; }


  

    

    
Кол-во трубы на ворота
    

  

  

    

    
Кол-во трубы на рамку ворот
    

  

  

    

    
Кол-во трубы на калитку
    

  

  

    

    
Кол-во трубы на что-то ещё
    

  



Ответ 3

Предлагаю следующий код для случая, если спрятаны только одна или две строки (работает
на chromium). Для других случаев можно добавить дополнительные селекторы (закономерность
видно из кода), но универсального решения я не знаю:



#calc tr:nth-child(2n), #calc tr[style*="display: none"] ~ tr:nth-child(2n + 1),
#calc tr[style*="display: none"] ~ tr[style*="display: none"] ~ tr:nth-child(2n) {
  background: #f0f0f0; /* Цвет фона */
  color: inherit; /* Цвет текста */
}

#calc tr:nth-child(2n + 1), #calc tr[style*="display: none"] ~ tr:nth-child(2n),
#calc tr[style*="display: none"] ~ tr[style*="display: none"] ~ tr:nth-child(2n+1) {
  background: #666; /* Цвет фона */
  color: #fff; /* Цвет текста */
}

  

    
Кол-во трубы на ворота
    

  

  

    
Кол-во трубы на рамку ворот
    

  

  

    
Кол-во трубы на калитку
    

  

  

    
Кол-во трубы на что-то ещё
    
1
  
  

    
Кол-во трубы на что-то ещё
    
2
  
  

    
Кол-во трубы на что-то ещё
    
3