Question

I have an HTML table,

when any cell is clicked, I want to highlight that cell using css, until another cell is clicked

I thought, I will set focus for that cell and set css for focus

but its not working..

my code goes as below:

$('td').click(function (event) {
    //$(this).tabindex = 0; 
    //$(this).tabindex = 1;
    $(this).focus();
});

and css as follows

td:focus
{
    background-color:Blue;
}

I think, I can’t add class to td because when other cell clicked I have to remove this class then..

Please help me achieve my requirement.

Also please let me know if there is any other way of achieving this or any work arounds..

Answer 1

Try:

$('td').click(function (event) {
      $('td').removeClass('focus'); //Remove focus from other TDs
     $(this).addClass('focus');
});

And

td.focus {
background-color:Blue; }