Подтвердить что ты не робот

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

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

<table id="mytable">
    <tr style="display: none;"><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr style="display: none;"><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
 </table>

Я пытаюсь настроить 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;
 }

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

<!DOCTYPE html>
<style>
#mytable tr:nth-child(odd) { 
      background-color:  #000;  
 }
#mytable tr:nth-child(even) { 
      background-color:  #FFF;
 }
</style>
<table id="mytable">
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
 </table>

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

 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] будет соответствовать элементам, у которых был установлен атрибут display, например <tr display=block>. Дисплей не является допустимым атрибутом HTML; то, что вы пытаетесь сделать, - это совпадение селектора в стиле элемента, но вы не можете сделать это в CSS, так как браузеру необходимо применять стили из CSS, прежде чем он сможет это понять, это происходит при применении этого селектора. Таким образом, вы не сможете выбрать, отображаются ли строки таблицы. Поскольку nth-child может принимать только n -й ребенок независимо от того, что, а не n th с некоторым атрибутом, нам придется отказаться от этой части CSS. Существует также nth-of-type, который выбирает дочерний элемент n того же типа элемента, но все, что вы можете сделать.

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

И там у вас есть.

Ответ 2

Если вы используете JQuery для изменения видимости строк, вы можете применить следующую таблицу к таблице, чтобы добавить класс .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;
}

Ответ 3

В то время как вы не можете Зебе полосать таблицу со скрытыми строками с помощью 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++;
        }
    }

Ответ 4

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

    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");

Ответ 5

Я придумал своеобразное решение, но оно зависит от того, что таблица может иметь только максимальное количество скрытых строк и имеет недостаток, требующий двух дополнительных правил 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;
}
<table>
  <tbody>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr data-hidden="true"><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr data-hidden="true"><td></td><td></td></tr>
    <tr data-hidden="true"><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
  </tbody>
</table>

Ответ 6

в jquery..

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

Ответ 7

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

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

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

style="display: table-row;"

Ответ 8

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

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

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

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

Ответ 9

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