Discussion :

[ishika83]

Bonjour,

Dans un tableau classique, j'ai plusieurs cellules, en cliquant sur une cellule un clic droit, j'affiche un menu contextuel dans lequel je choisi une valeur à insérer dans la cellule. ce que j'aimerai faire c'est de pouvoir sélectionner plusieurs cellules (en cliquant par exemple sur l'une et faisait glisser la souris vers une autre cellule comme quand on sélectionne un texte ou bien en sélectionnant la première et la dernière puis remplir les cellules entre les deux) et en faisant le clic droit et choisissant ma valeur dans le menu, la valeur s'appliquerait donc sur toutes les cellules sélectionnées.

Si quelqu'un aurai une idée, je suis preneuse, n'hésitez pas si vous avez besoin de plus de détails.

Merci

[FMaz]

Lors du début de la sélection (mousedown), enregistrer temporairement la cellule à partir de laquelle la sélection débute.

Lors de la fin de la sélection (mouseup), enregistrer temporairement la cellule à partir de laquelle la sélection prend fin.

Maintenant tu fait deux boucles imbriqués pour parcourir tout les champs sélectionné (entre début et fin), et pour chacun d'entre-eux, tu ajoute ta valeur.

[ishika83]

Merci pour ta réponse FMAZ, je t'écris un peu en retard vu qu'après un mois je n'avais toujours pas de réponse donc je suis passée à autre chose, là je suis revenu dessus donc le problème c'est que je récupère bien la valeur après onmousedown mais faut que je relâche le bouton tout de suite(onmouseup) pour récupérer la valeur de la même cellule et faut surtout pas que je glisse la souris vers une autre cellule sinon le onmouseup ne marche plus (pour info, mes valeurs sont dans un <div> qui lui même est dans un <td>).

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<td>
<div onmouseout="document.oncontextmenu = function(){menu.close();}" oncontextmenu="menu = fonctionRecup(1);
menu.mousePositionCapture(event);menu.open();">
     <center><img src="image.png"></center>
</div>
</td>
<td>
<div onmouseout="document.oncontextmenu = function(){menu.close();}" oncontextmenu="menu = fonctionRecup(2);
menu.mousePositionCapture(event);menu.open();">
     <center><img src="image.png"></center>
</div>
</td>

quand je clique droit sur mon image je récupère la valeur de fonctionRecup() qui est dans mon div, moi je veux sélectionner plusieurs images donc plusieurs div et avec un seul click droit récupérer toutes les valeurs.

Si tu as des idées je prends volontiers.

Merci

[ishika83]

Re bonjour

J'ai rajouté un ondragstart=return false; donc plus de souci pour récupérer ma valeur après le onmouseup. maintenant faut que je réfléchisse à la façon à laquelle je vais récupérer mes valeurs sachant que si je selectionne des div en plein mileu de mon tableau je ne doit résupérer que les valeurs de cettes dernière. refléchissons ...

[FMaz]

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
22
23
24
25
26
 
<div id="row_1_col_1"></div>
<div id="row_1_col_2"></div>
<div id="row_1_col_3"></div>
<div id="row_1_col_4"></div>
<div id="row_1_col_5"></div>
<div id="row_2_col_1"></div>
<div id="row_2_col_2"></div>
<div id="row_2_col_3"></div>
<div id="row_2_col_4"></div>
<div id="row_2_col_5"></div>
<div id="row_3_col_1"></div>
<div id="row_3_col_2"></div>
<div id="row_3_col_3"></div>
<div id="row_3_col_4"></div>
<div id="row_3_col_5"></div>
<div id="row_4_col_1"></div>
<div id="row_4_col_2"></div>
<div id="row_4_col_3"></div>
<div id="row_4_col_4"></div>
<div id="row_4_col_5"></div>
<div id="row_5_col_1"></div>
<div id="row_5_col_2"></div>
<div id="row_5_col_3"></div>
<div id="row_5_col_4"></div>
<div id="row_5_col_5"></div>

Maintenant supposons que tu enfonce ton click à row_2_col_1, et relâche à row5_col_3.

Tu devra gérer 4 variables globales:

Code :

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

1
2
3
4
5
 
var rowStart;
var rowEnd;
var colStart;
var colEnd;

Au moment du mousedown, tu décortique le id (this.id) pour en venir à mettre:
rowStart = 2;
colStart = 1;

Au moment du mouse up, tu décortique le id (this.id) pour en venir à mettre:
rowEnd = 5;
colEnd = 3;


Et tu appel une fonction dans laquelle tu aura ce genre de code:

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
 
machin = function()
{
   var obj=null;
   for(var y=rowStart; y<= rowEnd; y++)
   {
       for(var x=colStart; x<=colEnd; x++)
       {
            //Trouver l'élément
            obj = document.getElementById("row_"+y+"_col_"+x);
            obj.style.backgroundColor = "#339";
            alert (obj.id + " est sélectionné.");
       }
   }
}

Ps.: Je veux 20%
Note: Je te laisse faire les validations qui s'imposent, ce code n'est pas prêt à être utilisé (ex.: si tu sélectionne à l'envers)