CODEWITHSUNDEEP
cssinternet-explorer-8css-selectors
Anna
Anna

Reputation: 548

Can't make nth-child work with IE8

I have the following to alternate colors in a table:

#grid tr:nth-child(odd)    { background-color:#eee; }
#grid tr:nth-child(even)   { background-color:#fff; }

However, this works in Firefox, but not in IE8. After some research, I tried the following:

CSS:

#grid tr.odd    { background-color:#eee; }
#grid tr.even   { background-color:#fff; }

jQuery:

$(document).ready(function() {
    $("#grid tr:nth-child(even)").addClass("even");
    $("#grid tr:nth-child(odd)").addClass("odd");
});

But it doesn't work (actually, it didn't even work in Firefox). Any ideas of what else I could do (without having to use a third party js, such as Selectivizr)?

Thank you!

Upvotes: 2

Views: 2172

Answers (2)

Charles380
Charles380

Reputation: 1279

I was able to get it to work using jQuery by looping through each tr element and adding the class based on the index being odd/even

I tested with my a test web app with IE8, then I copied my code from the test app to jsFiddle. Only to realize that jsFiddle does not work properly with IE8.

WORKING JSFIDDLE

JS:

$(function () {
    $('tbody').children().each(function (index) {
        var row = $(this);
        if ((index + 1) % 2 === 0) {                
            row.addClass("even");
        } else {                
            row.addClass("odd");
        }
    });
});

HTML:

<table id="grid">
    <thead>
        <tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td>Col 3</td>
            <td>Col 4</td>
            <td>Col 5</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
        <tr>
            <td>Col 1 data</td>
            <td>Col 2 data</td>
            <td>Col 3 data</td>
            <td>Col 4 data</td>
            <td>Col 5 data</td>
        </tr>
    </tbody>
</table>

Upvotes: 0

Robert McKee
Robert McKee

Reputation: 21487

I would do this: CSS:

#grid tr {background-color: red;}
#grid tr:nth-child(even),
#grid tr.even { background-color:green;}

JS:

$(document).ready(function(){
    $('#grid tr:odd').addClass('even');
}

Upvotes: 1

Related Questions