jQuery - OnClick，总是在单击时更改表格单元格的背景颜色答案

【问题标题】：jQuery - OnClick, change background color for table cells always when clickedjQuery - OnClick，总是在单击时更改表格单元格的背景颜色
【发布时间】：2013-10-27 12:44:44
【问题描述】：

例如：你有一张桌子，它有 4 个 tds 和 2 个 trs。表格的背景颜色为白色。如果我点击 A td，A td 应该是红色的，如果我点击 B，B td 应该是红色的，A td 也应该是红色的。如果我点击 C 比，C 应该是红色的，B 和 A 也应该是红色的。

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

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

我使用的代码

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

【问题讨论】：

你想要This或This
如果你使用jQuery你不需要在上定义onclick函数

标签： javascript jquery html css

【解决方案1】：

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

JavaScript

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

CSS

td.on {
    background-color: red;
}

Updated Fiddle

【讨论】：

【解决方案2】：

欢迎来到 SO。

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

CSS

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

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

阅读更多关于 toggleClass here。更新fiddle

【讨论】：

是否可以判断页面是否已经添加了“red-cell”，如果是，可以在将“red-cell”添加到您单击的下一个单元格之前将其删除吗？有点像这样一次只能有一个单元格是红色的？
@KerynGill 我不确定我是否在关注。你的意思是你想一次只允许一个红细胞？
是的，这正是我的意思。我相信我是用这个...

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案4】：

试试这个

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

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

【讨论】：