I got this example code to highlight specific cells of a table in green. When I click a parameter on the left, the matching values are highlighted on the table (you can see on fiddle page). I’d like to be able to highlight with different colors with the press of a button or checkbox. Basically, I’d like to be able to color one group of parameters green, another yellow, and so on. Would that be possible? The fiddle page is here: http://jsfiddle.net/max33/kjcyu3yb/
I’m sure there’s a much more elegant method, but this quick and dirty method worked OK.
What I did first was change the class on your checkboxes to either highlight or highlight2.
I then altered your script to do two loops through the dom, once for highlight and once for highlight2
// changed this from .selector to input:checkbox
$('input:checkbox').each(function() {
$(this).on('click', check);
});
$('.all').each(function() {
$(this).on('click', all);
});
function all(event) {
if($(this).is(':checked')) {
$("input:checkbox:not(:checked)",$(this).parents('form')).not(this).prop("checked","checked");
} else {
$("input:checkbox(:checked)",$(this).parents('form')).not(this).prop("checked","");
}
//$('.selector').prop("checked", this.name === "SelectAll");
check(event);
}
function check(event) {
var highlight = $(".highlight:checked").map(function () {
return this.name
}).get()
$('td').removeClass("highlight").filter(function () {
return $.inArray($(this).text(), highlight) >= 0
}).addClass("highlight")
// added these two lines....
var highlight2 = $(".highlight2:checked").map(function () {
return this.name
}).get()
$('td').removeClass("highlight2").filter(function () {
return $.inArray($(this).text(), highlight2) >= 0
}).addClass("highlight2")
if ($(this).is(".selector"))
$('.all').not(this).prop("checked", false)
}
That being said: A more efficient method would seem (at least to me) to be to loop through the DOM once for each affected text and add/remove the class as appropriate instead of rebuilding the entire class base each time. In other words, if the user checks the M, it loops through looking for the M’s and highlighting those values then STOP.
Did you remember to change the classes on the checkboxes? I used your fiddle, changed the classes and pasted the script back in I posted, and it worked OK.
This is what I changed the html in your fiddle to (notice how the class doesn’t say selector anymore)
Thanks for the reply. I had a similar solution before, but this doesn’t allow color switching. If I use a specific class for a certain group and make it green or red, I won’t be able to switch to another color later. I was wondering if there s a solution to set the color of the number groups (or numbers individually) to a certain color on the frontend before I click them.
IF I understand what you’re asking for, it can be done but will require some planning, and I’m not sure that the approach you’re using is the one you want to use.
What I think you’ll need to do first is storyboard out what behavior you want to have. Get your requirements down first, then build the form (which will drive the table highlighting accordingly. The thing to keep in mind is not to get too clever for your users. Too configurable can often mean it doesn’t get used at all.
Thanks, Dave. I am not experienced in jquery. I know some basics, that is all.I googled for a similar question or code but couldn’t find any, so I thought it might not be possible with jquery. I’ll have to do some more research obviously.
It’s not the jQuery that’s going to trip you. It’s the planning of the behavior that will trip you up if you don’t know exactly how you want it to behave.
How are you going to decide how many colors you’re going to allow? Is the user going to choose the color, or are you going to control it?
How are you going to decide which letters go with which color? Are you going to have a set group, or will people will be able to pick any color for any letter? If any color for any letter, how do you handle if a color is already assigned but the user switches to another color?
Just those two sets of questions will drive how you set up the filtering form, and the behavior for 90% of the behavior you’re looking to have. But you need to figure that out first, or you’re going to have a lot of re-work.
Iterative design is one thing, but if you don’t have the end goal in sight, you’re in trouble and will end up with something that is either a) really ugly and unmaintanble, or b) not what you want or c) all of the above.
Some time with a sketchpad or even a drawing/prototyping program will help immensely.