Question

I have tried to highlight the row in a table using jQuery when the checkbox is checked. Used this jQuery code for the same.

$(":checkbox").change(function() {
    $(this).closest("tr").toggleClass("highlight", this.checked);
});

I’m getting it correct for only alternate rows. I have used the following CSS to style the alternate rows in the table.

.tables tbody tr:nth-child(2n){
    background-color:#F9F9F9;
}

How can I highlight the even rows too?

Answer 1

Just add this style to your css file

.tables tr.highlight td {
  background-color: #FFF9DC;
}

The problem is that your even rows styles overrides highlight style. So all you should do is to make your highlight style more important.