Using a checkbox to change table row styling

Question

I have a dynamically generated table of n rows with a checkbox in each row. How can I make that table row have a different background-color when its checkbox is checked?

I have no problem using jQuery if need be.

Community · Accepted Answer · 2017-05-23 10:29:39Z

7

If you're using jQuery, dead simple:

$("tr :checkbox").live("click", function() {
    $(this).closest("tr").css("background-color", this.checked ? "#eee" : "");
});

Live example

Basically what that does is identify checkboxes that are contained in a row, watch for clicks on them, and then use their state within the event handler to set the background-color CSS style on the row containing the checkbox.

Things to consider augmenting/modifying:

I used live in case the table is dynamic on the client (e.g., if you add or remove rows), although you may prefer to use delegate rooted in the table instead. If the table will be completely static, you might just use click.
The above hooks all checkboxes inside rows, which is probably more than you want. jQuery supports nearly all of CSS3's selectors and a fair bit more, so you can craft the selector for the checkboxes to make it more narrow. A basic change would be to filter by class ($("tr :checkbox.foo") where "foo" is the class) or checkbox name ($("tr :checkbox[name=foo]")).
As Morten suggests below, you might consider adding/removing a class rather than giving the CSS values directly in the code, as that helps decouple your script from your styling.

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Apr 1, 2011 at 17:04

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

1 Comment

Morten Mertner Over a year ago

Upvote from me as I nicked your selectors (was using css class and parents instead of closest).

Morten Mertner · Accepted Answer · 2011-04-01 17:05:48Z

2

$('tr :checkbox').live('click', function () {
    $(this).closest('tr').toggleClass('selected_row_style');
});

answered Apr 1, 2011 at 17:05

Morten Mertner

9,4834 gold badges41 silver badges57 bronze badges

1 Comment

T.J. Crowder Over a year ago

And right back atcha, using a class rather than inline style. Better for decoupling.

Alan · Accepted Answer · 2011-04-01 17:44:54Z

0

$("checkbox").live("click", function()
{ 
    if (this.checked) 
    {
       $(this).attr('background-color','#FFFFFF');
    }
    else
    {
       $(this).attr('background-color','#000000');
    }
}

edited Apr 1, 2011 at 17:44

answered Apr 1, 2011 at 17:07

Alan

6522 gold badges6 silver badges18 bronze badges

3 Comments

AJJ Over a year ago

Aren't you trying to change the background of the input element instead of the parent cell/row? Also, you probably meant $(this) instead of this ?

T.J. Crowder Over a year ago

@AJweb: The second time, yeah; the first one (this.checked) is correct. Also, @Alan, what happens when you uncheck?

Alan Over a year ago

Thanks for pointing me out my mistakes, i was in too much hurry :)

Collectives™ on Stack Overflow

Using a checkbox to change table row styling

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related