Update odd/even row colors when hiding rows

css, html, jquery

Solution

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`.

Problem

Original source