JQuery stripe odd/even rows

Question

quick JQuery question, I've got a products page that the user can filter. Each time a filter is applied/removed, a change event calls stripeTable() . I tried to implement the table striping using the following function, however after removing an item and calling stripTable(), the striping did not remain consistent, i.e each visible odd row one colour, each visible even row another.

function stripeTable() {
    // Find all odd visible table rows and add .odd class.
    $("#resultsTable > tbody > tr:even:visible").each(function() {
       $(this).addClass('even');
    });
    // Find all even visible table rows and add .even class.
    $("#resultsTable > tbody > tr:odd:visible").each(function() {
       $(this).addClass('odd');
    });
}

I cannot work out why the above wouldn't work. I managed to implement the function as below and it works fine. Any ideas?

function stripeTable() {
    var count = 1;
    // get all visible table rows 
    $("#resultsTable > tbody > tr").each(function () {
        // If table row is visible, strip accordingly.
        // Row 0 (table headers) not striped.
        if ($(this).is(":visible") && (this.rowIndex !== 0)) {
            if ((count % 2) != 0) {
                // Remove class .even if applied previously
                $(this).removeClass("even");
                // Odd row, add class .odd
                $(this).addClass("odd");
                count++;
            } else {
                // Remove class .odd if applied previously
                $(this).removeClass("odd");
                // Even row, add class .even
                $(this).addClass("even");
                count++;
            }
        }
    });
}

For clarity, stripeTable() is the last function called, the table rows are hidden/shown in the table before hand. Thanks.

@CalebEby I have, the CSS is in the two classes, odd and even. Assuming this is what you mean? — Dave0504, Mar 15 '16 at 18:42
Nope as @CalebEby implied, there's a much better way to handle this: using CSS [:nth-of-type](http://www.w3schools.com/cssref/sel_nth-of-type.asp) — General_Twyckenham, Mar 15 '16 at 18:43
https://css-tricks.com/snippets/css/css3-zebra-striping-a-table/ — Caleb Eby, Mar 15 '16 at 18:44
@CalebEby Thanks Caleb, I didn't know you could use odd/even with nth-child. — Dave0504, Mar 15 '16 at 18:48

score 3 · Accepted Answer · answered Mar 15 '16 at 18:43

3

The order of the psuedo-selectors matters.

// Computes "even" first, then "visible"
"#resultsTable > tbody > tr:even:visible"

// Compute "visible" first, then "even"
"#resultsTable > tbody > tr:visible:even"

Example Fiddle

answered Mar 15 '16 at 18:43

Stryner

7,288
3
18
18

score 3 · Answer 2 · answered Mar 15 '16 at 18:45

3

It's a much better idea to do it in CSS, something like:

#resultsTable tr:nth-of-type(even) {
    background-color: #eee;
}

answered Mar 15 '16 at 18:45

General_Twyckenham

2,161
2
21
36

Lee Brindley · Answer 3 · 2016-03-15T18:56:56.560

CSS is the way to go here, although this doesn't answer the question it will advise future readers.

This below isn't IE8 compatible.

table tr:nth-child(even) {
        background-colour: red;
} 

table tr:nth-child(odd) {
       background-colour: green;
}

The above is equivalent to below 

 //even
table tr:nth-child(2n) {
       background-colour: red;
}

//odd
table tr:nth-child(2n + 1) {
       background-colour: green;
}

JQuery stripe odd/even rows

3 Answers3

Linked