Changer le background des TD au survol souris si clic

Version imprimable

23/04/2018, 14h59
henneka

Changer le background des TD au survol souris si clic

Bonjour,

J'ai une fonction qui modifie le background des td d'un tableau au clic de la souris

Je souhaite la modifier pour arriver a modifier les background de mes td au survol + si cliqué de ma souris

Voyez vous comment faire svp ?

A vous lire
23/04/2018, 15h02
Toufik83

tu peux nous montrer ton code?

Code:

1 2 3 4 5 6 7 8 9 10 11 $("#draw td").click(function() { if($(this).hasClass('white')) { $(this).removeClass('white'); $(this).addClass('black'); } else{ $(this).removeClass('black'); $(this).addClass('white'); } });
Un tableau html de x par et je colore les td au clic

J aimerai le faire a la volee, au survol cliqué, comme si je dessinais ....

tu peux factoriser les 3 événements (click,mouseenter et mouseleave) dans une seule ligne.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
$("#draw td").on('click mouseenter mouseleave',function(e) {
//console.log(e.type);
/*e.type détermine quel événement a été declenché, click, ou mouseenter ou mouse leave*/
if(e.type=='click'||e.type=='mouseenter'){
  if($(this).hasClass('white'))
  {
    $(this).removeClass('white').addClass('black');
  }
  else{
    $(this).removeClass('black').addClass('white');	
  }
}
else if(e.type=='mouseleave'){
 if($(this).hasClass('black')){
  $(this).removeClass('black').addClass('white');
 }
}
 
});

23/04/2018, 16h07
henneka

Merci,

Cela ne fais pas ce que je veux faire

Je veux changer la classe des td a la volée(changer la couleur du background en l'occurence) tant que le bouton de la souris est cliqué, comme si je dessinais a la souris .....
23/04/2018, 19h20
ProgElecT

Citation:

Envoyé par henneka

Merci,

......... tant que le bouton de la souris est cliqué, .....

:koi: ........................ :idea: tant que le bouton de la souris est maintenu appuyé ! ;)

il faut prendre en considération qu'au chargement des <td>, aucune classe n'est attribué a ces éléments.
si tu essaie ça, ça donne le résultat souhaité?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
$("#draw td").on('click mouseenter mouseleave', function(e) {
 
   if (e.type == 'click') {
     if ($(this).hasClass('white')||!$(this).attr('class')) {
       $(this).removeClass('white').addClass('black');
     } else if($(this).hasClass('black')){
       $(this).removeClass('black').addClass('white');
     }
   } else if (e.type == 'mouseleave') {
     if ($(this).hasClass('white')) {
       $(this).removeClass('white');
     }
   }
   else if(e.type == 'mouseenter'){
    if($(this).hasClass('white')||!$(this).attr('class')){
     $(this).removeClass('white').addClass('black');
    }
   }
 
 });

EDIT : concernant l'appuie maintenu sur la souris, il y'a aussi l'événement mouseup et mousedown que tu peux utiliser.... c'est a toi d'adapter le code selon ton besoin;)

Bonjour,
Voici un code fonctionnel

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
$("#draw td").on('click mouseenter mouseleave', function(e) {
 
   if (e.type == 'click') {
     if ($(this).hasClass('white')||!$(this).attr('class')) {
       $(this).attr('class', 'black');
     } else if($(this).hasClass('black')){
      $(this).attr('class', 'white');
     }
   } else if (e.type == 'mouseleave') {
     if ($(this).hasClass('white')) {
       $(this).attr('class', 'black');
     }
   }
   else if(e.type == 'mouseenter'){
    if($(this).hasClass('white')||!$(this).attr('class')){
     $(this).attr('class', 'white');
    }
   }
 
 });