Discussion :

[henneka]

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

[Toufik83]

tu peux nous montrer ton code?

[henneka]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ....

[Toufik83]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 .....

[ProgElecT]

Merci,

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

........................ tant que le bouton de la souris est maintenu appuyé !

[Toufik83]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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