Css3 Odd and Even Only Visible Rows

How do you apply CSS to odd/even visible rows after a javascript function has been used to filter out some rows? (incorrectly flagged as duplicate)

Instead of changing the display propriety add/remove a class

tr[i].classList.add("active");

tr[i].classList.remove("active");

So then you can simple change the css like so

tr.active {
    display: block;
}
tr {
    display: none;
}
tr.active:nth-child(even){
    background-color: #F6F6F6
}
tr.active:nth-child(odd){
    background-color: #EEEEEE
}

As Stephen P pointed out my original answer was wrong, it look like ntl-child ignores the class, so a suggestion to solve this can be something like the following, for simplicity, as MarsAndBack said you can split this into multiple functions.

function Filter(n) {    var input, filter, table, tr, td, i, txtValue, count;    input = document.getElementById("searchbox" + n);    filter = input.value.toUpperCase();    table = document.getElementById("mytable");    tr = table.getElementsByTagName("tr");    for (i = 0, count = 0; i < tr.length; i++) {        td = tr[i].getElementsByTagName("td")[n];        if (td) {            txtValue = td.textContent || td.innerText;            if (txtValue.toUpperCase().indexOf(filter) > -1) {                tr[i].style.display = "";                if (count++ % 2 == 0) {                  tr[i].style.background = "#F6F6F6";                } else {                  tr[i].style.background = "#EEEEEE";                }            } else {                tr[i].style.display = "none";            }        }    }}

tr:nth-child(even){    background-color: #F6F6F6}
tr:nth-child(odd){    background-color: #EEEEEE}

<table id="mytable">  <tr>    <th>      <div>A</div>      <input id="searchbox0" type="text" onkeyup="Filter(0)" placeholder="Filter..">    </th>    <th>      <div>B</div>      <input id="searchbox1" type="text" onkeyup="Filter(1)" placeholder="Filter..">    </th>  </tr>  <tr>    <td>04718J00065</td>    <td>2100305513</td>  </tr>  <tr>    <td>29417J01131</td>    <td>2100305513</td>  </tr>  <tr>    <td>07416J01979</td>    <td>2100029648</td>  </tr>  <tr>    <td>02518J01169</td>    <td>2100030939</td>  </tr></table>

Select odd even child excluding the hidden child

Pseudo-selectors don't stack, so your :not doesn't affect the :nth-child (nor would it affect :nth-of-type etc.

If you can resort to jQuery, you can use the :visible pseudo-selector there, although that's not a part of the CSS spec.

If you're generating the HTML and can change that, you can apply odd/even with logic at run-time, eg in PHP:

foreach ($divs AS $i => $div) {
    echo '<div class="box ' . ($i % 2 ? 'even' : 'odd') . '">x</div>';
}

Even trying to do something tricky like

.box[class='box']:nth-of-type(even)

doesn't work, because the psuedo-selector doesn't even stack onto the attribute selector.

I'm not sure there's any way to do this purely with CSS - I can't think of any right now.

CSS Alternate Rows - some rows hidden

If you are using jQuery, you can employ one of its functions, for example .filter(), to choose only the elements that are visible. But the key here is a CSS selector :visible.

For example (see jsfiddle):

jQuery('tr:visible:odd').css({'background-color': 'red'});
jQuery('tr:visible:even').css({'background-color': 'yellow'});

Update odd/even row colors when hiding rows

There are a few approaches to consider. Because of your use-case, the pure css approach is more theoretical, but won't actually work for you.

In a perfect world...

Firstly, to keep your markup loosely coupled with styling, and allow easy extensibility, favor more flexible CSS rules. There's usually no need to hard-code the even and odd classes on elements; that means that you'll have to add those classes every time you try and add a new element. Instead, use the css3 :nth-child selector:

tbody tr:nth-child(odd) {
    background-color:#99FFFF;
}

tbody tr:nth-child(even) {
    background-color:#FFFF99;
}

But since you're hiding elements without actually removing them...

jsFiddle

You'll need to use JavaScript, and manually manage these classes. Every time the checkbox value changes, reassign the even and odd classes to the visible rows:

$("#checkbox").change(function () {
    if ($("#checkbox").is(":checked")) {
        $("table tbody tr").each(function () {
            var cell = $.trim($(this).find("td:eq(4)").text());
            if (cell.length == 0) {
                console.log("empty");
                $(this).hide();
            }
        });
    } else {
        $("table tbody tr").show();
    }

    $("table tbody tr").removeClass("odd even");
    $("table tbody tr:visible:odd").addClass("odd");
    $("table tbody tr:visible:even").addClass("even");
});

(Of course this means your CSS remains as it was originally).

Take a look at the jQuery docs on selectors. Some convenient ones are the :even selector, and the more verbose :nth-child.

How can you do alternative row color but just on visible rows?

/**
 *  Iterate each visible row, if :odd or :even, apply 
 *  the relevant background colour depending on a flag.
**/
var evenOdd = 0;
$("table.altRow tr:visible").each(function() {  
    $(this).css("background-color", ( evenOdd ? "#DEDFDE" : "#EEECEE" ));
    evenOdd = !evenOdd;
});

Demo: http://jsfiddle.net/uMP5x/7/

As Andreas mentioned, you can use jQuery's .each()'s first arugment to your advantage with modulus, removing my initial need for a Boolean.

/**
 *  Iterate each visible row, if :odd or :even, apply 
 *  the relevant background colour depending if it's a 0 or 1
 *  after a simple MOD division.
**/
$("table.altRow tr:visible").each(function( index ) {  
    $(this).css("background-color", ( index % 2 ? "#DEDFDE" : "#EEECEE" ));
});

Demo: http://jsfiddle.net/uMP5x/8/

CSS table with alternate background color with hidden elements

So try

<table class="grid">
    <tr class="parent"><td>nono1</td></tr>
    <tr class="parent"><td>nono2</td></tr>
    <tr class="parent"><td>nono3</td></tr>
    <tr class="parent"><td>nono4</td></tr>
    <tr class="display-none"><td>nono5</td></tr>
    <tr class="parent"><td>nono6</td></tr>
    <tr class="parent"><td>nono7</td></tr>
    <tr class="parent"><td>nono8</td></tr>
</table>

.parent:nth-child(odd) {
        background-color: #fff;
        }
        .parent:nth-child(even) {
            background-color: red;
        }

        /* after the first non-.parent, toggle colors */
        tr:not(.parent) ~ .parent:nth-child(odd) {
            background-color: red;
        }
        tr:not(.parent) ~ .parent:nth-child(even) {
            background-color: #fff;
        }

        /* after the second non-.parent, toggle again */
        tr:not(.parent) ~ tr:not(.parent) ~ .parent:nth-child(odd) {
            background-color: #fff;
        }
        tr:not(.parent) ~ tr:not(.parent) ~ .parent:nth-child(even) {
            background-color: red;
        }
        .display-none * {
            display: none;
        }

http://jsfiddle.net/vA5Wz/

---

Related Topics