7

例: テーブルがあり、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')
  } );
} );
4

4 に答える 4

8

SOへようこそ。

まず第一onclickに、td に属性を付ける必要はありません。次に、背景色を設定する代わりに CSS クラスを使用することをお勧めします。

CSS

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

JS

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

toggleClass の詳細については、こちらをご覧ください。更新されたフィドル

于 2013-10-27T12:49:23.610 に答える
4

赤の背景に CSS クラスを使用.toggleClass()してから、JavaScript で使用します。

JavaScript

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

CSS

td.on {
    background-color: red;
}

更新されたフィドル

于 2013-10-27T12:49:37.133 に答える
1

これを試して：

$( function() {
  $('td').click( function() {
      if($(this).attr('style'))
    $(this).removeAttr('style');
      else
    $(this).css('background', '#aaa')
  } );
} );
于 2013-10-27T12:47:44.703 に答える
0

これを試して

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

ここにフィドルがありますhttp://jsfiddle.net/k8UgT/199/

于 2013-10-27T12:50:32.633 に答える