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

Having trouble installing css-sprite on Windows 8.1 using NPM

"Obtaining Google locations within a modal box - a step-by-step

Using -webkit-hyphens: auto in Safari does not function properly when the width is set to auto

Automatically align a Div to the right within an ngFor directive in an Angular 6 application

Achieving a shuffling CSS animation in Angular 8 may require some adjustments compared to Angular 2. Here's how you can make it

What are some tips for incorporating vue.js into a basic web application?

Retrieving inline CSS value using jQuery

Position the current div in the center of a bootstrap progress bar for mobile devices

Tips for seamlessly integrating an overlay into a different image

Disable the default hover effect of the ASP.NET menu

Customizing the color of a select dropdown in Bootstrap using CSS styling

Various objects are becoming engaged and chosen instead of a single item being focused on

What is the best way to reduce the spacing between text?

"Utilizing SVG format to manipulate text, adjusting font size within tspan elements

Turn off the feature that highlights links

Limit the maximum height of a list within a fluid-width content container

Create a centrally located search bar in the header with a stylish button using Bootstrap 5

Incorporating CSS into React.js applications

Tips for distinguishing individual rows within a table that includes rowspans?

Guide on displaying search results in separate boxes using HTML