Appliquer du CSS sur plusieurs cellules L-C

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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>

11/07/2020, 10h15
NoSmoking
Bonjour,
dans le principe je verrais :
- Mise en place sur la <table> d'un écouteur mousedown qui met à true un flag de prise en compte des sélections ;
- Mise en place sur la <table> d'un écouteur mouseup qui met à false le flag de prise en compte des sélections ;
- Mise en place sur les éléments <td> d'un écouteur de mouseover et ajout d'une classe sur la <td> si le flag de prise en compte des sélections est actif.
12/07/2020, 07h33
Toufik83
Bonjour,

J'ai un peu modifié ton exemple et utilisé Math.min(), Math.max() et l'opérateur de décomposition (...) pour arriver au résultat voulu.

Tu vois bien que les variables sont enregistrées dans un objet ui :
- ui.rows récupère seulement les <tr> ayant des td.selected
- ui.min récupère la valeur minimale d'un tableau qui contient les indexes des premiers td.selected de chaque ligne.
- ui.max récupère la valeur maximale d'un tableau qui contient les indexes des derniers td.selected de chaque ligne.
Bonus : Gérer le mouvement de la souris (à gauche, à droite, vers le haut et vers le bas) lorsqu'on inverse la sélection tout en gardant le mousedown, avec les cordonnées de la page evt.pageX et evt.pageY.

Salut Toufik83, je voyais quelque chose de plus trivial et concis limite « un peu bourrin » :mouarf:.

Code:

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
"use strict";
$(function () {
    // Coordonnées des deux cellules de début et de fin
    const selection = {
        debut: {l: 0, c: 0},
        fin: {l: 0, c: 0}
    };
    const $cells = $("#grille td");
    let active = false;
    /**
     * mise à jour classe sur TD
     */
    function updateSelection(el) {
        // mise à jour en cours
        selection.fin.l = el.parentNode.rowIndex - 1;
        selection.fin.c = el.cellIndex;
 
        // on remet de l'ordre pour le test
        const left = Math.min(selection.debut.c, selection.fin.c);
        const right = Math.max(selection.debut.c, selection.fin.c);
        const top = Math.min(selection.debut.l, selection.fin.l);
        const bottom = Math.max(selection.debut.l, selection.fin.l);
 
        // el est un élément DOM et non jQuery
        $cells.each((ind, el) => {
            // récup. position
            const lig = el.parentNode.rowIndex - 1;
            const col = el.cellIndex;
            if (lig >= top && lig <= bottom && col >= left && col <= right) {
                el.classList.add("selected")
            }
            else {
                el.classList.remove("selected")
            }
        });
    }
    /**
     * Gestion des événements
     */
    $cells.on("mousedown", (evt) => {
        active = true;
        // get position de départ
        const el = evt.target;
        selection.debut.l = el.parentNode.rowIndex - 1;
        selection.debut.c = el.cellIndex;
        // mise à jour sélection
        updateSelection(el);
    });
    $cells.on("mouseover", (evt) => {
        if (active) {
            updateSelection(evt.target);
        }
    });
    // mouseUP sur document si l'on sort
    $(document).on("mouseup", () => {
        active = false;
    });
});

12/07/2020, 15h42
Toufik83

Salut NoSmoking, ta solution est propre aussi, j'ai toujours apprécié tes réponses :ccool::king:.
14/07/2020, 10h22
NoSmoking

Merci Toufik83, sache que c'est réciproque ;)