Question

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

Answer 1

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');
     }
 });