Struggling to get the nth-child selector to function properly in IE8

Question

Struggling to get the nth-child selector to function properly in IE8

Looking for a solution to alternate colors in a table? Here's what I tried:

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

Unfortunately, this works in Firefox but not in IE8. After some investigation, I attempted 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");
});

However, this approach didn't work as expected (not even in Firefox). Open to suggestions on how to solve this issue without resorting to using third-party JavaScript libraries like Selectivizr.

Appreciate any help, thank you!

css internet-explorer-8 css-selectors

Answer 1

Answer №1

If I were to tackle this, my approach would be as follows: 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');
}

Answer 2

If I were to tackle this, my approach would be as follows: 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');
}

Answer 3

Answer №2

I managed to successfully implement this functionality using jQuery. By iterating through each tr element, I was able to dynamically assign a class based on whether the index was odd or even.

Initially, I tested this solution in my personal web application using IE8. Once I confirmed its efficacy, I proceeded to transfer the code to jsFiddle for further testing. It was at that point I discovered that jsFiddle does not have full compatibility with IE8.

Click here to view the WORKING JSFIDDLE example.

Below is the JavaScript code snippet:

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

Here is the accompanying HTML structure:

<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>
    </tbody>
</table>

Answer 4

I managed to successfully implement this functionality using jQuery. By iterating through each tr element, I was able to dynamically assign a class based on whether the index was odd or even.

Initially, I tested this solution in my personal web application using IE8. Once I confirmed its efficacy, I proceeded to transfer the code to jsFiddle for further testing. It was at that point I discovered that jsFiddle does not have full compatibility with IE8.

Click here to view the WORKING JSFIDDLE example.

Below is the JavaScript code snippet:

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

Here is the accompanying HTML structure:

<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>
    </tbody>
</table>

Struggling to get the nth-child selector to function properly in IE8

Answer №1

Answer №2

Similar questions

Measuring the quantity of 'table' elements with jQuery

Arrangement containing 4 separate div elements - 2 divs are fixed in size, 1 div adjusts dynamically (without scroll), and the remaining div fills the

What is causing the issue with CSS properties and media queries not being effective on specific elements?

Ensure the placeholder remains front and center, growing in size as it moves vertically

Angular 2's innovative approach to implementing a sticky footer concept

Tips for adjusting content that is 900px wide to fit properly on a mobile screen while maintaining its original width

How can I modify the background color of the datePicker?

FlexNav excluding

Ways to eliminate unused classes from JQuery UI

Add a CSS class to an innerHTML element just a single time

Updating the iFrame source using jQuery depending on the selection from a dropdown menu

Adding a div to the preceding div based on matching IDs in AngularJS

Items positioned to the left will not overlap

Ensure that the header stays centered on the page as you scroll horizontally

The printing code is not able to interpret the CSS

Creating a Distinctive HTML Structure with Div Percentage (HTML 4)

Keeping the color of CSS buttons consistent can be achieved by setting specific

I'm looking to adjust the padding on the left and right sides of the v-select menu checkbox in Vuetify 3. How

Trouble with CSS display in Internet Explorer 8

Positioning elements next to each other in jQuery on mouse over - while also addressing scrolling issues in a div