Change background color for rows of an HTML table on click

I need that when i check a checkbox i apply different background color to HTML table开发者_高级运维 rows according to and ID of a user in database using jquery, and then i uncheck the checkbox go to previous state. For the record i am not asking for code i am asking for concept.

http://www.freeimagehosting.net/image.php?ef44cf44a5.jpg

I assume the issue is how to store each row's individual background colour.

You could store each colour in an individual attribute:

<tr bg_checkbox_active="#FFFFFF">

but there is no W3C valid way to do this in HTML 4.x (see discussion e.g. here).

The best idea that comes to mind is declaring each row's colour in a CSS class:

....
.row10.active { background-color: #FFFFFF }
.row11.active { background-color: #FAFAFA }
.row12.active { background-color: #BCBCBC }
....

and then have jQuery switch the row's class according to the check box state. It keeps the code clean; the CSS syntax causes a bit of an overhead when used with a lot of rows but that is probably going to be negligible.

Update re one checkbox to change all rows: that is even easier to do with CSS.

....
table.active .row10 { background-color: #FFFFFF }
table.active .row11 { background-color: #FAFAFA }
table.active .row12 { background-color: #BCBCBC }
....

and then switch the table's active class.

You want to use a selector that matches the table rows, get the id of the user from the row and choose the color, then use the css function to set the background-color. You can use the data method to store the previous color. When your checkbox is unchecked, simply get the previous color using data, and restore it.

If the id of the user isn't included in the row or relatable to the row somehow, then you'll need to change the table and add it, otherwise it isn't possible.

Here's a little code to get you started -- this is the "check" part.

$('tr').each( function() {
    var id == $(this)...  // get user id
    var color = chooseColor( id ); // figure out color somehow
    $(this).data( 'previous-color', $(this).css('background-color') );
    $(this).css( 'background-color', color );
});

EDIT: Based on your comment, I think CSS classes may be a better solution for you -- just assign the group name as the class. Then in your CSS have different CSS selectors for .groupX and .groupX.active, .groupY and .groupY.active, etc. Then all you need to do is add/remove the active class from the rows on checkbox toggle. I don't know if the "active" class name is the most semantically appropriate, but it's convenient for the example.

CSS

tr.group-ANIM { /* no special formatting */ }
tr.group-ANIM.active { background-color: #f00; }

tr.group-ZZZ { }
tr.group-ZZZ.active { background-color: #0f0; }

$('#toggleBox').click{ function() {
     var checked = $(this).filter(':checked').length > 0;
     if (checked) {
         $('tr').addClass('active');
     }
     else {
         $('tr').removeClass('active');
     }
 });

Theoretically you could use jQuery calls to do pretty much all of this. You'd use the .change() event bound to a TR to handle the row clicking.

http://api.jquery.com/change/

Inside your .change() handler function, you'd use the jQuery .css() method to update the style for each row.

http://api.jquery.com/css/

Or even better use the .addClass() and .removeClass() methods to update the class for the row.

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

Regardless, you'd need to have a unique style or class applied to the background of each individual row when the page is initialized.

http://www.w3schools.com/css/css_background.asp