How can I reset the alternating table row in a new table using CSS?

Question

How can I reset the alternating table row in a new table using CSS?

I am encountering an issue with alternating row colors in my tables. Even though I have two separate tables, the tr:odd rule is being applied across both tables.

Below is the HTML for my tables:

<table class='myTable'>
    <tr class='myRow'>
        <td>row 1</td>
    </tr>
    <tr class='myRow'>
        <td>row 2</td>
    </tr>
    <tr class='myRow'>
        <td>row 3</td>
    </tr>
</table>
<hr>
<table class='myTable'>
    <tr class='myRow'>
        <td>row 1</td>
    </tr>
    <tr class='myRow'>
        <td>row 2</td>
    </tr>
</table>

Here is the CSS:

.myAltRowClass { background: #DDDDDC; }

And the JavaScript:

$(".myTable .myRow:odd").addClass('myAltRowClass');

You can view the jsfiddle: http://jsfiddle.net/niner/Sgq9T/

My problem is that the first row of the second table is starting with the alternate color, when it should start with the normal (white) color. Any assistance on this would be greatly appreciated. Thank you.

jquery html css jquery-selectors

Answer 1

Answer №1

Yes, you can achieve this by selecting the rows of each table independently:

$(".myTable").find('.myRow:odd').addClass('myAltRowClass');

Check out the JS Fiddle demo.

Alternatively, you can simply apply CSS to accomplish the same effect:

table.myTable tr:nth-child(even) {
    background: #DDDDDC;
}

View the CSS-only JS Fiddle demo.

Keep in mind that the CSS :nth-child() selector uses `even` because CSS counts from one, unlike JavaScript which starts at zero.

You can also combine both methods by doing:

$('.myTable tr:nth-child(even)').addClass('myAltRowClass');

See the combined approach in action on JS Fiddle.

Answer 2

Yes, you can achieve this by selecting the rows of each table independently:

$(".myTable").find('.myRow:odd').addClass('myAltRowClass');

Check out the JS Fiddle demo.

Alternatively, you can simply apply CSS to accomplish the same effect:

table.myTable tr:nth-child(even) {
    background: #DDDDDC;
}

View the CSS-only JS Fiddle demo.

Keep in mind that the CSS :nth-child() selector uses `even` because CSS counts from one, unlike JavaScript which starts at zero.

You can also combine both methods by doing:

$('.myTable tr:nth-child(even)').addClass('myAltRowClass');

See the combined approach in action on JS Fiddle.

Answer 3

Answer №2

To achieve alternating row colors in a table using jQuery, you can utilize the CSS3 selector :nth-child(odd) or even depending on your specific requirements. It is recommended to use :nth-child(odd) as it is natively supported and allows jQuery to utilize the more performant native querySelectorAll method. On the other hand, :odd is not a natively supported selector, as mentioned in the jQuery documentation.

$(".myTable .myRow:nth-child(odd)")
    .addClass('myAltRowClass');

For a demonstration, you can check out the jsFiddle Demo.

Answer 4

To achieve alternating row colors in a table using jQuery, you can utilize the CSS3 selector :nth-child(odd) or even depending on your specific requirements. It is recommended to use :nth-child(odd) as it is natively supported and allows jQuery to utilize the more performant native querySelectorAll method. On the other hand, :odd is not a natively supported selector, as mentioned in the jQuery documentation.

$(".myTable .myRow:nth-child(odd)")
    .addClass('myAltRowClass');

For a demonstration, you can check out the jsFiddle Demo.

Answer 5

Answer №3

It's worth mentioning that jQuery's pseudo-class selectors like :odd, :even, and others may not work exactly as you anticipate. These selectors actually target elements based on their position within the jQuery array generated by the preceding selector. For example, when you use $('.myTable .myRow:odd'), it's like creating a temporary array of elements from $('.myTable .myRow') and then excluding the elements with even indexes. The same principle applies to :even, :first, and similar selectors (although nth-child() operates differently and aligns more with expectations).

Answer 6

It's worth mentioning that jQuery's pseudo-class selectors like :odd, :even, and others may not work exactly as you anticipate. These selectors actually target elements based on their position within the jQuery array generated by the preceding selector. For example, when you use $('.myTable .myRow:odd'), it's like creating a temporary array of elements from $('.myTable .myRow') and then excluding the elements with even indexes. The same principle applies to :even, :first, and similar selectors (although nth-child() operates differently and aligns more with expectations).

How can I reset the alternating table row in a new table using CSS?

Answer №1

Answer №2

Answer №3

Similar questions

"Include a song in a playlist without the need to sign in - Spotify API

Ways to integrate mouse out functionalities using an if condition

Issues with invoking C# event through ajax communication

Developing Angular 6 for dynamic HTML navigation tabs

implement an angular directive to apply a CSS element

Include a class in the <code> element if it is not nested within a <pre> tag

Trouble with applying position absolute to pseudo element in Firefox version 12 and higher

Issue with CSS on various mobile devices

-moz-box-reflect - Styling for FireFox

How can I implement a pause in my JavaScript code?

Duplicating a Bootstrap theme in Orchard CMS

Concealing and Revealing a Div Element in HTML

Is it possible to display a complete list of my items along with their parameters using jQuery ajax?

Unexpected glitch in my jQuery code is causing an event to fail triggering

The jQuery find and replace feature is causing my entire content to be replaced instead of just specific paragraphs

Harvesting data from an HTML document using BeautifulSoup and Python

Setting the size of a box using CSS in HTML pages

image in responsive css design

The bootstrap modal display issue: black background visible

What is the proper method for integrating the next.js Image component with the HTML <picture> element?