jQuery - OnClick，在单击时始终更改表单元格的背景色

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.

例如:您有一个表，它有4个tds和2个trs。桌子的底色是白色的。如果我点击一个td, td应该是红色，而点击B, B td应该是红色，td也应该是红色。如果我点击C，那么C应该是红色的，B和A也应该是红色的。

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

我有这样的东西。但这并不好，因为当我再次点击时，我想把颜色变回白色。

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

The code i use

我使用的代码

<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>

JS:

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

4 个解决方案

#1

Welcome to SO.

欢迎来到。

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

首先，您不需要在td上单击属性。其次，我建议使用CSS类而不是设置背景颜色。

CSS

CSS

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

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

Read more about toggleClass here. Updated fiddle

在这里阅读更多关于toggleClass的信息。更新的小提琴

#2

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

红色背景使用CSS类，然后在JavaScript中使用. toggleclass()。

JavaScript

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

CSS

td.on {
    background-color: red;
}

Updated Fiddle

更新的小提琴

#3

try this:

试试这个:

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

#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/

这是小提琴http://jsfiddle.net/k8UgT/199/。

#1