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.
2
-
Does the checkbox already have the ID corresponding to the row somehow?Nick Craver– Nick Craver2010-05-03 11:37:17 +00:00Commented May 3, 2010 at 11:37
-
No only one checkbox to change all rowsSarah– Sarah2010-05-03 11:40:28 +00:00Commented May 3, 2010 at 11:40
Add a comment
|
3 Answers
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');
}
});
7 Comments
Sarah
I only have one concern would it cause may any problems or slow script?
tvanfosson
@Sarah - Depends on the size of the table I would imagine but I don't think it would take very long to run. It certainly won't slow down creating the page initially -- note that I've deliberately left the code incomplete based on your question. If you have difficultly working the remainder out, just comment here (and reference my name using @tvanfosson) and I can flesh it out. I'd need to know how you're choosing colors and how you get the id of the user.
tvanfosson
@Sarah -- Also, I'd note that my answer would change if the color were dependent on the "class" of the user instead of the individual user -- I'd use CSS classes in that case. If you have individual users with independent colors, then I think the class-based approach doesn't scale very well.
Sarah
@tvanfosson-- The color is not based on class it is as groups not each individual user. And If i want to return to previous state what should i do. Also i keep the color in a non displayed td in each row.
tvanfosson
@Sarah -- I think classes actually would be the ideal solution if there aren't too many groups. Note that the CSS could be generated dynamically as well based on user preferences if that makes more sense for your application.
|
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.
Inside your .change() handler function, you'd use the jQuery .css() method to update the style for each row.
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.
