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

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!