How can I change background color for table cells always when clicked?

Question

For example: You have a table, and it has 4 tds and 2 trs. Table's background color is white. If I click to A td, A td should be red, than if I click to B, B td should be red and A td should be red too. If I click to C than, C should be red and B and A should be red too.

I have something like this. But it isn't good, because when I click again I want to change color back to white.

http://jsfiddle.net/k8UgT/193/

The code i use

$(function() {
  $('td').click(function() {
    $(this).css('background', '#aaa')
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
  <tr>
    <td onclick="function()">AAA</td>
    <td onclick="function()">BBB</td>
    <td onclick="function()">CCC</td>
  </tr>
  <tr>
    <td onclick="function()">DDD</td>
    <td onclick="function()">EEE</td>
    <td onclick="function()">FFF</td>
  </tr>
</table>

Barocchio

Answer 1

First of all you don't need to onclick attribute on the td elements. Second of all I would suggest using a CSS class instead of setting the background color.

CSS

.red-cell {
   background: #F00; /* Or some other color */
}

JS

$( function() {
  $('td').click( function() {
    $(this).toggleClass("red-cell");
  } );
} );

Read more about toggleClass here. Updated fiddle

Caboodle

Is there anyway to tell if the page has already added a "red-cell", if so can it be removed before you add "red-cell" to the next cell you click on? Kind of like so only one cell can be red at a time? – Conoscenti

@KerynGill I am not sure that I am following. Do you mean that you want to allow only one red cell at the time? – Caboodle

Yes that's exactly what I mean. I believe I got it using this... <script> $( function() { $('.productslider div.slide a.addclassonbtn').on('click',function(){ $('.productslider div.slide a.addclassonbtn').removeClass('selected'); $(this).addClass('selected'); }); }); </script> – Conoscenti

Answer 2

Use a CSS class for the red background and then use .toggleClass() in your JavaScript.

JavaScript

$('td').click( function() {
    $(this).toggleClass('on');
});

CSS

td.on {
    background-color: red;
}

Updated Fiddle

Dwarfish

Answer 3

try this:

$( function() {
  $('td').click( function() {
      if($(this).attr('style'))
    $(this).removeAttr('style');
      else
    $(this).css('background', '#aaa')
  } );
} );

Promptbook

Answer 4

try this

$( function() {
  $('td').toggle( function() {
    $(this).css('background', 'red');
  },function(){
  $(this).css('background', 'white');
  });
} );

here is the fiddle http://jsfiddle.net/k8UgT/199/

Edh

Answer 5

Use below code with jQuery.

First step remove background color from all HTML class name, second step is set background color just for selected class name.

$(".your_class_name").on('click', function(event){
   $(".your_class_name").removeAttr('style'); //The first step
   $(this).css('background', 'red'); //The second step
});

Chassidychassin

This fails to accomplish what the OP wants – Labium