Зебра разбивает таблицу со скрытыми строками с помощью CSS3?

У меня есть таблица

 
 
 
 
 
 

Я пытаюсь установить striping таблицы для использования селекторов nth-child, но просто не может его расколоть.

  table #mytable tr[@display=block]:nth-child(odd) { background-color: #000; } table #mytable tr[@display=block]:nth-child(odd) { background-color: #FFF; } 

Я почти уверен, что я близок … не могу, похоже, взломать.

кто-нибудь проходит по подсказке?

Вот как можно ближе. Обратите внимание: вы не можете сделать nth-child count только отображаемыми строками; nth-child будет принимать n- й дочерний элемент независимо от того, что, а не n- й дочерний элемент, который соответствует данному селектору. Если вы хотите, чтобы некоторые строки отсутствовали и не влияли на чередование зебры, вам придется полностью удалить их из таблицы либо через DOM, либо на стороне сервера.

   
 
 
 
 
 
 

Вот исправления, которые я сделал:

  table #mytable tr[@display=block]:nth-child(odd) { background-color: #000; } 

Нет необходимости указывать селектор предков для селектора на основе id ; существует только один элемент, который будет соответствовать #table , поэтому вы просто добавляете дополнительный код, добавляя table .

  #mytable tr[@display=block]:nth-child(odd) { background-color: #000; } 

Теперь [@display=block] будет соответствовать элементам, для которых установлен атрибут, установленный для блокировки, например

. Дисплей не является допустимым атрибутом HTML; то, что вы пытаетесь сделать, – это совпадение селектора в стиле элемента, но вы не можете сделать это в CSS, так как браузеру необходимо применять стили из CSS, прежде чем он сможет это понять, он находится в процессе выполнения, когда применяется этот селектор. Таким образом, вы не сможете выбрать, отображаются ли строки таблицы. Поскольку nth-child может принимать только n- й дочерний элемент независимо от того, что не n- го с некоторым атрибутом, нам придется отказаться от этой части CSS. Существует также nth-of-type , который выбирает n- й дочерний элемент того же типа элемента, но это все, что вы можете сделать.

  #mytable tr:nth-child(odd) { background-color: #000; } 

И вот он у вас есть.

Если вы используете JQuery для изменения видимости строк, вы можете применить следующую таблицу к таблице, чтобы добавить class .odd где это необходимо. Вызывайте его каждый раз, когда видимые строки различаются.

  function updateStriping(jquerySelector){ $(jquerySelector).each(function(index, row){ $(row).removeClass('odd'); if (index%2==1){ //odd row $(row).addClass('odd'); } }); } 

И для css просто делайте

 table#tableid tr.visible.odd{ background-color: #EFF3FE; } 

В то время как вы не можете Zebra полосой таблицы со скрытыми строками с помощью CSS3, вы можете сделать это с помощью JavaScript. Вот как это сделать:

  var table = document.getElementById("mytable"); var k = 0; for (var j = 0, row; row = table.rows[j]; j++) { if (!(row.style.display === "none")) { if (k % 2) { row.style.backgroundColor = "rgba(242,252,244,0.4)"; } else { row.style.backgroundColor = "rgba(0,0,0,0.0)"; } k++; } } 

Для jquery-способа вы можете использовать эту функцию, которая выполняет итерацию по строкам в вашей таблице, проверяя вязкость строки и (re), устанавливая class для видимых нечетных строк.

  function updateStriping(jquerySelector) { var count = 0; $(jquerySelector).each(function (index, row) { $(row).removeClass('odd'); if ($(row).is(":visible")) { if (count % 2 == 1) { //odd row $(row).addClass('odd'); } count++; } }); } 

Используйте css для установки фона для нечетных строк.

 #mytable tr.odd { background: rgba(0,0,0,.1); } 

Затем вы можете позвонить в эту ленту-зебра всякий раз, используя:

 updateStriping("#mytable tr"); 

Я придумал какое-то решение, но оно зависит от того, что в таблице может быть только максимальное количество скрытых строк, а недостаток требует наличия двух дополнительных правил CSS для каждой возможной скрытой строки. Принцип заключается в том, что после каждой скрытой строки вы переключаете background-color нечетных и четных строк вокруг.

Вот краткий пример с тремя скрытыми строками и необходимым CSS для до 4 из них. Вы уже можете увидеть, насколько громоздким может стать CSS, но, тем не менее, кто-то может его использовать:

 table{ background:#fff; border:1px solid #000; border-spacing:1px; width:100%; } td{ padding:20px; } tr:nth-child(odd)>td{ background:#999; } tr:nth-child(even)>td{ background:#000; } tr[data-hidden=true]{ display:none; } tr[data-hidden=true]~tr:nth-child(odd)>td{ background:#000; } tr[data-hidden=true]~tr:nth-child(even)>td{ background:#999; } tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{ background:#999; } tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{ background:#000; } tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{ background:#000; } tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{ background:#999; } tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{ background:#999; } tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{ background:#000; } 
 

в jquery ..

 var odd = true; $('table tr:visible').each(function() { $(this).removeClass('odd even').addClass(odd?'odd':'even'); odd=!odd }); 

Я добавляю в css:

 tr[style="display: table-row;"]:nth-child(even) { background-color: #f3f6fa; } 

и создать тэг добавить тэг

 style="display: table-row;" 

Коды JQuery для цвета зебры в таблице html

 $("#mytabletr:odd").addClass('oddRow'); $("#mytabletr:even").addClass('evenEven'); 

И CSS, который вы можете сделать

 .oddRow{background:#E3E5E6;color:black} .evenRow{background:#FFFFFF;color:black} 

Вы можете легко подделать полоски зебры, если вы примените вертикально повторяющийся gradleиент в родительской таблице, расположенный точно в соответствии с высотой строк (строки должны быть прозрачными). Таким образом, на столе все равно, если что-нибудь спрятано, оно повторится, несмотря ни на что.

  • Почему мы должны включать ttf, eot, woff, svg, ... в шрифт-face
  • Как использовать новый плагин аффикса в загрузочном файле twitter 2.1.0?
  • Гибкая модель коробки - дисплей: flex, box, flexbox?
  • Цвет фона не отображается в предварительном просмотре
  • Должен ли пограничный радиус обрезать контент?
  • Альтернатива CSS Calc
  • CSS-медиа-запрос для iPad и iPad?
  • 'transform3d' не работает с позицией: фиксированные дети
  • Заполнить цвет фона слева направо CSS
  • Почему включение аппаратного ускорения в CSS3 замедляет производительность?
  • Есть ли способ использовать две тени CSS3 для одного элемента?
  • Давайте будем гением компьютера.