CODEWITHSUNDEEP
jqueryhtmlcss
Jack Hillard
Jack Hillard

Reputation: 606

Update odd/even row colors when hiding rows

I have several tables on a page and a checkbox to show/hide rows based on the contents of one of the cells. While all rows are visible, everything is perfect and the row colors alternate as needed. When I hide rows though, the alternating row colors are no longer correct (obviously). How can I easily update the classes to keep the alternating row colors when the checkbox is checked and then go back to normal after unchecking the checkbox? 

<table id='27249'><thead><tr><th>h1</th><th>h2</th><th>h3</th><th>h4</th><th>h5</th><th>h6</th></tr><thead><tbody>
<tr class='odd'><td>text</td><td>text</td><td>text</td><td>$0.25 </td><td></td><td></td></tr>
<tr class='even'><td>text</td><td>text</td><td>text</td><td>$0.25 </td><td></td><td></td></tr>
<tr class='odd'><td>text</td><td>text</td><td>text</td><td>$0.25 </td><td></td><td></td></tr>
<tr class='even'><td>text</td><td>text</td><td>text</td><td>$0.25 </td><td></td><td></td></tr>
</tbody></table>

Jsfiddle example - http://jsfiddle.net/6bfjw/3/

Upvotes: 3

Views: 5215

Answers (2)

nbrooks
nbrooks

Reputation: 18233

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.

Upvotes: 4

EduSanCon
EduSanCon

Reputation: 1929

You can do it with :odd and :even selectors

Add this code at the end of the change() function:

$("table tbody").each(function() {        
    $(this).find("tr:visible:even").addClass("even").removeClass("odd");
    $(this).find("tr:visible:odd").addClass("odd").removeClass("even");
});

I've updated your Fiddle

Upvotes: 4

Related Questions