Question

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

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

我使用的代码

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

Answer 1

欢迎来到SO。

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

<强> CSS

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

<强> JS

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

详细了解toggleClass here。更新了fiddle

Answer 2

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

的JavaScript

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

CSS

td.on {
    background-color: red;
}

Updated Fiddle

Answer 3

试试这个：

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

Answer 4

试试这个

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

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

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

4 个答案: