Salut à vous j'ai une grille avec pleine de cellule qui est représenté avec L -> ligne C -> colonne quand je clique sur un des TD je reçois dans mon console log le début sélection avec la mouse Down et je reçois fin de la sélection avec un mouse Up.
quand je déplace la souris j'aimerais réussir à insérer du CSS de couleur mauve en arrière-plan sur tous les casses qui va déterminer la ligne/colonne de départ avec la ligne/colonne de fin(Mouse Up)
voici une image qui explique mieux le problème : https://ibb.co/PFh9RPC . on voit très bien le passage de la souris du point A au B parce que le CSS s'applique seulement sur le passage des cellules que la souris a parcourues j'ai mis des petites étoiles rouges pour faire comprendre que ces casses doivent être de couleur mauve.
je laisse une petite démo technique ici pour test mon rendu : https://jsfiddle.net/tbq63ksf/1/
Si vous avez une solution je suis preneur.
Code javascript : 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 "use strict"; console.log("jQuery version:", jQuery.fn.jquery); $(function () { // Coordonnées des deux cellules de début et de fin let selection = { debut: { l: 0, c: 0 }, fin: { l: 0, c: 0 } }; let cells = $("#grille td"); console.log(cells); let active = false; cells.on({ "mousedown": evt => { cells.removeClass("selected"); active = true; selection.debut.l = $(evt.target).parent().index() - 1; // Numéro de la ligne selection.debut.c = $(evt.target).index(); // Numéro de la colonne $(evt.target).addClass("selected"); }, "mouseup": evt => { if (active) { selection.fin.l = $(evt.target).parent().index() - 1; // Numéro de la ligne selection.fin.c = $(evt.target).index(); // Numéro de la colonne console.log("Début sélection", selection.debut, "fin sélection", selection.fin); active = false; } }, "mousemove": evt => { if (active) { $(evt.target).addClass("selected") console.log("Move active"); } } }); });
Code html : 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144 <!DOCTYPE html> <html> <head lang="fr"> <meta charset="UTF-8" /> <link rel="shortcut icon" href="data:," type="image/x-icon"> <title>Sélection plage de cellules</title> <style> #grille-container { margin: 5% 10%; } #grille { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; user-select: none; } #grille td, #grille th { border: 1px solid #ddd; padding: 8px; } #grille tr:nth-child(even) { background-color: #f2f2f2; } #grille tr:hover { background-color: #ddd; } #grille th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #4CAF50; color: white; } #grille td.selected { background-color: #927de0; } </style> </head> <body> <header> <h1>Sélection plage de cellules</h1> </header> <main> <div id="grille-container"> <table id="grille"> <tr> <th>Lorem</th> <th>ipsum</th> <th>dolor</th> <th>sit</th> <th>amet</th> <th>consectetur</th> <th>adipiscing</th> <th>elit</th> </tr> <tr> <td>sed-L0-C0</td> <td>do-L0-C1</td> <td>eiusmod</td> <td>tempor</td> <td>incididunt</td> <td>ut</td> <td>labore</td> <td>et</td> </tr> <tr> <td>dolore-L1-C0</td> <td>magna-L1-C1</td> <td>aliqua</td> <td>Ut</td> <td>enim</td> <td>ad</td> <td>minim</td> <td>veniam</td> </tr> <tr> <td>quis-L2-C0</td> <td>nostrud-L2-C1</td> <td>exercitation</td> <td>ullamco</td> <td>laboris</td> <td>nisi</td> <td>ut</td> <td>aliquip</td> </tr> <tr> <td>ex-L3-C0</td> <td>ea-L3-C1</td> <td>commodo</td> <td>consequat</td> <td>Duis</td> <td>aute</td> <td>irure</td> <td>dolor</td> </tr> <tr> <td>in-L4-C0</td> <td>reprehenderit-L4-C1</td> <td>in</td> <td>voluptate</td> <td>velit</td> <td>esse</td> <td>cillum</td> <td>dolore</td> </tr> <tr> <td>eu-L5-C0</td> <td>fugiat-L5-C1</td> <td>nulla</td> <td>pariatur</td> <td>Excepteur</td> <td>sint</td> <td>occaecat</td> <td>cupidatat</td> </tr> <tr> <td>non-L6-C0</td> <td>proident-L6-C1</td> <td>sunt</td> <td>in</td> <td>culpa</td> <td>qui</td> <td>officia</td> <td>deserunt</td> </tr> </table> </div> </main> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="script/main.js"></script> </body> </html>
Partager