March 18, 2012
How to change a table row color when clicked and back to what it was originally when another row clicked?
Question by Sinopia
As the title explains, I wish to change the color of a row when it is clicked then revert the color when another is clicked, however still change the color of the newly clicked row.
A resolution in JQuery would be much appreciated. I just can’t crack this one.
What I have so far but it’s not working for me.
function loadjob(jobIDincoming, currentID){
$("#joblistingDetail").load('jobview.php' , {jobID: jobIDincoming}).hide().fadeIn('100');
var last = new Array();
last.push(currentID);
$(last[last.length-1]).closest('tr').css('background-color', 'white');
$(currentID).closest('tr').css('background-color', 'red');};
Answer by Starx
No need to complicate things. This is as simple as possible.
$("table tr").click(function() {
$("table tr").css("background", "#fff"); //reset to original color
$(this).css("background", "#fo0"); //apply the new color
});