web-dev-qa-db-fra.com

jQuery - OnClick, change toujours la couleur d'arrière-plan des cellules du tableau

Par exemple: Vous avez une table et elle a 4 tds et 2 trs. La couleur de fond de la table est blanche. Si je clique sur A td, A td doit être rouge, que si je clique sur B, B td doit être rouge et A td doit aussi être rouge. Si je clique sur C, C doit être rouge et B et A doivent également être rouges.

J'ai quelque chose comme ça. Mais ce n'est pas bon, parce que quand je clique à nouveau, je veux changer de couleur en blanc.

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

Le code que j'utilise

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

Bienvenue chez SO.

Tout d'abord, vous n'avez pas besoin de l'attribut onclick sur les td. Deuxièmement, je suggérerais d'utiliser une classe CSS au lieu de définir la couleur d'arrière-plan.

CSS

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

JS

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

En savoir plus sur toggleClass ici . Mise à jour fiddle

7
Hugo Tunius

Utilisez une classe CSS pour le fond rouge, puis utilisez .toggleClass() dans votre JavaScript.

JavaScript

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

CSS

td.on {
    background-color: red;
}

Mise à jour Fiddle

3
techfoobar

essaye ça:

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

essaye ça 

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

voici le violon http://jsfiddle.net/k8UgT/199/

0
Anto Subash