Search code examples
jquerycss-tables

What is the best way to highlight alternative rows when you have nested tables?


I have a table and I highlight the alternative rows using this line:

$("table.altRow tr:odd").css("background-color", "#DEDFDE");

which works great except now, in one of the columns I have a separate nested table so I am seeing issues in the parent table around alternative rows.

So lets say I have 3 rows in the outer table:

Row 1
Row 2
Row 3

If there isn't a nested table I get:

Row 1: Dark
Row 2: Light
Row 3: Dark

but if I have a nested table in Row 1 with two rows, I get

Row 1: Dark (Nested table row 1: dark, Nested Table row 2: light)
Row 2: dark
Row 3: Light

Is there anyway to have nested table not affect the alternate rows of the parent table?


Solution

  • Use child selectors > (make sure you add tbody):

    $("table.altRow > tbody > tr:odd").css("background-color", "#DEDFDE");
    

    Fiddle