Highlighting row with jQuery on checkbox select

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?

Right, but if your page goes down then this question won't be as useful anymore :-/ — Andrew Whitaker
– Andrew Whitaker, Commented Sep 16, 2012 at 18:46
But the table code is very large. It includes a lot of other markups. — 99tharun
– 99tharun, Commented Sep 16, 2012 at 18:47

Nick Kugaevsky · Accepted Answer · 2012-09-16 18:49:02Z

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.

answered Sep 16, 2012 at 18:49

Nick Kugaevsky

2,9451 gold badge20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

99tharun Over a year ago

One more question. I have another checkbox in the same row. When I click in that checkbox also, the row is highlighting (which is not needed). How do I trigger the jQuery only for the first checkbox?

Nick Kugaevsky Over a year ago

Add some class to checkboxes you want to behave in this way. And bind jQuery with something like this $(".some-class:checkbox").change(function()...

user656521 Over a year ago

May be try like this $(".A input:checkbox").change(function() Where A is a class for the checkbox!

Collectives™ on Stack Overflow

Highlighting row with jQuery on checkbox select

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related