Fenêtre modale et affichage de données

**Raptor92** · 08/02/2024, 16h51

Bonjour,

Je commence à passer de Windev vers ce nouveau monde et rencontre un souci.....
Dans le code joint, j'arrive à ouvrir une fenêtre modale en cliquant sur une ligne de mon tableau, mais je bloque sur l'alimentation de la fenêtre modale.
J'ai laisser le formulaire dans ma page pour les besoins de construction

Pourriez vous me mettre dans la bonne direction svp
Merci beaucoup

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
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../user.css" />
 
    <script type="text/javascript">
        //<!--
        document.oncontextmenu = new Function("return false");
        //-->
    </script>
    <title>LISTE DES USERS</title>
 
</head>
 
<body>
    <nav class="side-nav">
        <div class="wrapper">
            <div class="three-dots-container">
                <div class="dot d1"></div>
                <div class="dot d2"></div>
                <div class="dot d3"></div>
            </div>
            <div class="nav-bloc n-1">
                <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="file" class="svg-inline--fa fa-file fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
                    <path d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z"></path>
                </svg>
                <div class="sub-nav">
                    <h2>Les articles</h2>
                    <ul>
                        <li>
                            <a href="article.php">Création des articles</a>
                        </li>
                        <li>
                            <a>Liste des articles</a>
                        </li>
                        <li>
                            <a>Stock par articles</a>
                        </li>
                        <li>
                            <a>Monitoring</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="nav-bloc n-2">
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-alt" class="svg-inline--fa fa-user-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path d="M256 288c79.5 0 144-64.5 144-144S335.5 0 256 0 112 64.5 112 144s64.5 144 144 144zm128 32h-55.1c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16H128C57.3 320 0 377.3 0 448v16c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-16c0-70.7-57.3-128-128-128z"></path>
                </svg>
 
                <div class="sub-nav">
                    <h2>Fournisseurs</h2>
                    <ul>
                        <li>
                            <a>Création</a>
                        </li>
                        <li>
                            <a>Liste des fournisseurs</a>
                        </li>
                        <li>
                            <a>Stock par fournisseur</a>
                        </li>
                        <li>
                            <a>Monitoring</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="nav-bloc n-3">
                <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="image" class="svg-inline--fa fa-image fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z"></path>
                </svg>
                <div class="sub-nav">
                    <h2>Subtitle 3</h2>
                    <ul>
                        <li>
                            <a>Link</a>
                        </li>
                        <li>
                            <a>Link</a>
                        </li>
                        <li>
                            <a>Link</a>
                        </li>
                        <li>
                            <a>Link</a>
                        </li>
                        <li>
                            <a>Link</a>
                        </li>
                        <li>
                            <a>Link</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="nav-bloc n-4">
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cog" class="svg-inline--fa fa-cog fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"></path>
                </svg>
                <div class="sub-nav">
                    <h2>Paramètres</h2>
                    <ul>
                        <li>
                            <a href="user.php"><i class="fa-solid fa-circle-info"></i>&nbsp;&nbsp;Users</a>
                        </li>
                        <li>
                            <a href="usersList.php"><i class="fa-solid fa-circle-info"></i>&nbsp;&nbsp;Users List</a>
                        </li>
                        <li>
                            <a>Link</a>
                        </li>
                        <li>
                            <a>Link</a>
                        </li>
                        <li>
                            <a>Link</a>
                        </li>
                        <li>
                            <a>Link</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="nav-bloc n-5">
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cog" class="svg-inline--fa fa-cog fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path d="M256 288c79.5 0 144-64.5 144-144S335.5 0 256 0 112 64.5 112 144s64.5 144 144 144zm128 32h-55.1c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16H128C57.3 320 0 377.3 0 448v16c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-16c0-70.7-57.3-128-128-128z"></path>
                </svg>
                <div class="sub-nav">
                    <h2>A propos</h2>
                    <ul>
                        <li>
                            <a href="apropos.php"><i class="fa-solid fa-circle-info"></i>&nbsp;&nbsp;A propos</a>
                        </li>
                        <li>
                            <a href="Contact.php"><i class="fa-solid fa-address-card"></i>&nbsp;&nbsp;Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <main class="main-content">
        <!-- DEBUT DE PAGE -->
        <div id="main">
            <header>
                <h1>USER LIST</h1>
            </header>
            <section>
                <h2>Enregistrements</h2>
                <table>
                    <thead>
                        <tr>
                            <th width=7%>ID</th>
                            <th width=13%>Nom</th>
                            <th width=7%>Prenom</th>
                            <th width=10%>level</th>
                            <th width=7%%>ID</th>
                            <th width=12%>PASSWORD</th>
                            <th width=17%>CREATE</th>
                            <th width=17%>MODIF</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- CONSTRUCTION TABLEAU DES USERS -->
                        <?php
                        try {
                            $bdd = new PDO('mysql:host=localhost;dbname=xxx;charset=utf8', 'xxxxx', 'xxxx');
                        } catch (Exception $e) {
                            die('Erreur : ' . $e->getMessage());
                        }
                        $query = $bdd->prepare('SELECT * FROM USERS');
                        $query->execute();
                        while ($data = $query->fetch()) {
                        ?>
                            <tr onclick="fctClick(this)">
                                <td <a href="#rh" OnClick="window.open('modal.php','titre','width=500,height=500');" ></a>
                                <?php echo $data['USER_CODE']; ?></td>
                                <td <a href="#rh" OnClick="window.open('modal.php','titre','width=500,height=500');" ></a>
                                <?php echo $data['USER_NAME']; ?></td>
                                <td <a href="#rh" OnClick="window.open('modal.php','titre','width=500,height=500');" ></a>
                                <?php echo $data['USER_PRENOM']; ?></td>
                                <td <a href="#rh" OnClick="window.open('modal.php','titre','width=500,height=500');" ></a>
                                <?php echo $data['USER_LEVEL']; ?></td>
                                <td <a href="#rh" OnClick="window.open('modal.php','titre','width=500,height=500');" ></a>
                                <?php echo $data['USER_ID']; ?></td>
                                <td <a href="#rh" OnClick="window.open('modal.php','titre','width=500,height=500');" ></a>
                                <?php echo $data['USER_PASSWORD']; ?></td>
                                <td <a href="#rh" OnClick="window.open('modal.php','titre','width=500,height=500');" ></a>
                                <?php echo $data['USER_CREATE']; ?></td>
                                <td <a href="#rh" OnClick="window.open('modal.php','titre','width=500,height=500');" ></a>
                                <?php echo $data['USER_MODIF']; ?></td>
                            </tr>
 
                        <?php
                        }
                        ?>
                    </tbody>
                </table>
                <h2>Formulaire</h2>
                <form method="POST" action="#" class="forma">
                    <table>
                        <fieldset class="fieldseta">
                            <legend>Données à modifier</legend>
                            <p><label>USER CODE</label><input type="text" name="CODE"></p>
                            <p><label>USER NAME</label><input type="text" name="Nom"></p>
                            <p><label>USER NAME 1</label><input type="text" name="Prenom"></p>
                            <p><label>USER LEVEL</label><input type="text" name="LEVEL"></p>
                            <p><label>USER ID</label><input type="text" name="ID"></p>
                            <p><label>USER PASS</label><input type="text" name="PASS"></p>
                            <p><label>USER CREATE</label><input type="text" name="CREATE"></p>
                            <p><label>USER MOFIF</label><input type="text" name="MODIF"></p>
                            <p><input type="submit" value="Modifier"><input type="reset" value="Annuler"></p>
                        </fieldset>
                    </table>
                </form>
            </section>
        </div>
        <script>
            function fctClick(obj) {
                // récup. formulaire
                var oForm = document.querySelector('form');
                // récup. INPUT type text
                var oInputs = oForm.querySelectorAll('input[type=text]');
                // transfert des contenus
                for (var i = 0, nb = obj.cells.length; i < nb; i += 1) {
                    oInputs[i].value = obj.cells[i].textContent;
                }
            }
        </script>
     <?php      
      if (isset($_POST['CODE'])) { // si formulaire soumis
      echo $_POST['code'];
      echo $_POST['name'];
      echo $_POST['prenom'];
      echo $_POST['level'];
      echo $_POST['id'];
      echo $_POST['password'];
      echo $_POST['create'];
      echo $_POST['modif'];
    }
    ?>
</body>
 
</html>

**NoSmoking** · 09/02/2024, 18h19

Bonjour,
avant de commencer il te faut corriger la construction des lignes du type :

Code html :

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

1
2
<td <a href="#rh" OnClick="window.open('modal.php','titre','width=500,height=500');" ></a>
<?php echo $data['USER_CODE']; ?></td>

ce n'est pas tout conforme !

Maintenant, pourquoi ouvrir dans une nouvelle fenêtre et pas directement dans la page via un fenêtre modale <dialog> par exemple.

Ta fonction fctClick, permet de remplir avec les données de la <table>, ton formulaire et c'est celui-ci qu'il faut soumettre au serveur.

Si tu veux vraiment passer par une pop-up, il te faut sérialiser les name->value du formulaire, voir FormData(), pour les passer en paramètres mais cela ne sera pas du POST comme indiqué par ton formulaire.

**Raptor92** · 09/02/2024, 20h04

Bonsoir,

Avant tout, merci pour le temps passé..
J'ai bien lu et (crois avoir..) compris et j'ai de fait mis la balise dialogue sur ma table et en effet, je peux faire apparaitre ma fenêtre de dialogue avec les données de la ligne.

Pour autant, je ne vois pas comment faire en sorte que cela fonctionne lorsque je clique sur une ligne de mon tableau car le bouton ne peut pas être déplacé en dehors de la balise "dialogue"
Auriez vous un idée par hasard

Encore merci

**mathieu** · 09/02/2024, 20h53

n'importe quel évènement javascript peut lancer du code qui va modifier le contenu de la page.
montrez un test en html et javascript qu'on puisse tester chez nous.

**Raptor92** · 09/02/2024, 21h01

Bonsoir,

Merci pour votre aide, la partie JS est pour le moment dans la même page, mais après la construction, je séparerais le tout

A noter que mon tableau est alimenté par une requête

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
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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../user.css" />
    <title>Document</title>
</head>
 
<body>
    <section>
        <h4>Enregistrements</h4>
        <table>
            <thead>
                <tr>
                    <th width=7%>ID</th>
                    <th width=13%>Nom</th>
                    <th width=7%>Prenom</th>
                    <th width=10%>level</th>
                    <th width=7%%>ID</th>
                    <th width=12%>PASSWORD</th>
                    <th width=17%>CREATE</th>
                    <th width=17%>MODIF</th>
                    <th width=10%>Update</th>
                </tr>
            </thead>
            <tbody>
                <!-- CONSTRUCTION TABLEAU DES USERS -->
                <?php
                try {
                    $bdd = new PDO('mysql:host=localhost;dbname=simag;charset=utf8', 'root', 'root');
                } catch (Exception $e) {
                    die('Erreur : ' . $e->getMessage());
                }
                $query = $bdd->prepare('SELECT * FROM USERS');
                $query->execute();
                while ($data = $query->fetch()) {
                ?>
                    <tr onclick="fctClick(this)">
                        <td> <?php echo $data['USER_CODE']; ?></td>
                        <td> <?php echo $data['USER_NAME']; ?></td>
                        <td> <?php echo $data['USER_PRENOM']; ?></td>
                        <td> <?php echo $data['USER_LEVEL']; ?></td>
                        <td> <?php echo $data['USER_ID']; ?></td>
                        <td> <?php echo $data['USER_PASSWORD']; ?></td>
                        <td> <?php echo $data['USER_CREATE']; ?></td>
                        <td> <?php echo $data['USER_MODIF']; ?></td>
                        <td <a href="modale.php" OnClick="window.open('modal.php','update','width=500,height=500');"></a>
                            <input type="button" value="Update" />
                        </td>
                    </tr>
 
                <?php
                }
                ?>
            </tbody>
 
        </table>
        <h5>Formulaire</h5>
        <script type="text/javascript" src="test1.js"></script>
        <dialog>
            <button autofocus>Fermer</button>
            <form method="GET" action="#" class="forma">
                <table>
                    <fieldset class="fieldseta">
                        <legend>Données à modifier</legend>
                        <p><label>USER CODE</label><input type="text" name="code"></p>
                        <p><label>USER NAME</label><input type="text" name="Nom"></p>
                        <p><label>USER NAME 1</label><input type="text" name="Prenom"></p>
                        <p><label>USER LEVEL</label><input type="text" name="LEVEL"></p>
                        <p><label>USER ID</label><input type="text" name="ID"></p>
                        <p><label>USER PASS</label><input type="text" name="PASS"></p>
                        <p><label>USER CREATE</label><input type="text" name="CREATE"></p>
                        <p><label>USER MOFIF</label><input type="text" name="MODIF"></p>
                        <p><input type="submit" value="Modifier"><input type="reset" value="Annuler"></p>
                    </fieldset>
                </table>
            </form>
        </dialog>
        <button>UPDATE</button>
    </section>
    </div>
    <!-- OUVRE LE DIALOGUE -->
    <script>
        const dialog = document.querySelector("dialog");
        const showButton = document.querySelector("dialog + button");
        const closeButton = document.querySelector("dialog button");
        // Le bouton "Afficher la fenêtre" ouvre le dialogue
        showButton.addEventListener("click", () => {
            dialog.showModal();
        });
        // Le bouton "Fermer" ferme le dialogue
        closeButton.addEventListener("click", () => {
            dialog.close();
        });
    </script>
    <!-- ALIMENTE LA MODALE -->
    <script>
        function fctClick(obj) {
            // récup. formulaire
            var oForm = document.querySelector('form');
            // récup. INPUT type text
            var oInputs = oForm.querySelectorAll('input[type=text]');
            // transfert des contenus
            for (var i = 0, nb = obj.cells.length; i < nb; i += 1) {
                oInputs[i].value = obj.cells[i].textContent;
            }
        }
    </script>
</body>
 
</html>

La partie CSS est faite pour une page incluant menu et autre que j'ai enlevé dans la partie HTML pour plus de clarté

Code CSS :

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
 
*,
 
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
 
}
body {
  background-color: #3e3c3c;
  font-family: Raleway, Helvetica, sans-serif;
  position: relative;
}
 
/* New Stacking Context with Fixed */
 
.side-nav {
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
}
 
/* To hide the sub-nav */
.wrapper {
  background: #333;
  height: 100vh;
  width: 75px;
}
 
.three-dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}
 
.dot {
  flex-shrink: 0;
  margin: 10px 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
}
 
.d1 {background: crimson;}
.d2 {background: yellow;}
.d3 {background: lightgreen;}
 
.nav-bloc {
  padding: 20px 0;
  display: flex;
  justify-content: center;
  cursor: pointer;
  border-bottom: 1px solid #f2f2f21e;
}
 
.nav-bloc:hover {
  background: rgb(24, 24, 24);
}
 
.nav-bloc:hover .sub-nav {
  transform: translateX(75px);
}
 
.nav-bloc svg {
  width: 25px;
  fill: #f2f2f2;
  transition:  0.2s ease-in-out ;
}
 
.nav-bloc:hover  svg {
  fill: #50bddf;
}
 
.sub-nav {
  padding: 0px;
  width: 200px;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #333;
  z-index: -1;
  color: white;
 
  /* Hidden at the left side */
 
  transform: translateX(-100%);
  transition:transform 0.2s ease-in-out;
  border-right: 2px solid #000;
  border-left: 2px solid #000;
}
 
.sub-nav h2 {
  font-family: open sans, sans-serif;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222;
}
 
.sub-nav ul {
  list-style-type: none;
}
 
.sub-nav li {
  padding: 15px 20px;
}
 
.sub-nav li:hover {
  background: rgba(160, 160, 160, 0.555);
}
 
.sub-nav li a {
   color: #f2f2f2;
   text-decoration: none;
}
.main-content {
  padding-left: 75px;
  color: #f3f3f3;
}
 
.main-content h1 {
  font-family: Open Sans, sans-serif;
  text-align: center;
  margin: 30px 0;
  font-size: 40px;
 
}
 
.main-content p {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 30px;
  line-height: 1.7;
 
}
 
/*CSS Contact*/
 
form h1{
    font-size: 25px;
}
 
form .corps-formulaire{
    display: flex;
    flex-wrap: wrap;
    /*Marge entre les champs & le bouton*/
    margin-bottom: 70px;
}
form .corps-formulaire .groupe{
    /*Marge entre les champs ITEM GAUCHE*/
    margin-top: 70px;
    margin-right: 90px;
    /*INPUT GAUCHE*/
    position: relative;
    /*Marge entre les champs*/
    margin-top: 4px;
    display: flex;
    /*Place les intitulés au dessus des chmaps*/
    flex-direction: column;
    /*Position en hauteur des input GAUCHE*/
    padding: 10px 5px 10px 30px;
 
}
form .corps-formulaire .boite{
    position: relative;
    /*Marge entre les champs*/
    margin-top: 10px;
    display: flex;
    /*Place les intitulés au dessus des chmaps*/
    flex-direction: column;
 
}
form .corps-formulaire .droite .boite input{
    /*Marge entre l'intitulé et le champs*/
    margin-top: 4px;
    padding: 8px 5px 10px 30px;
    border: 1px solid blue;
    outline-color: red;
    border-radius: 5px;
 
}
form .corps-formulaire .gauche .groupe input{
  /*Marge entre l'intitulé et le champs*/
  margin-top: 4px;
  padding: 8px 5px 10px 30px;
  border: 1px solid blue;
  outline-color: red;
  border-radius: 5px;
 
}
 
.selecteur {
  /*Marge entre l'intitulé et le champs*/
  margin-top: 10px;
  padding: 10px 5px 10px 30px;
  border: 1px solid #3e3c3c;
  outline-color: red;
  border-radius: 5px;
  /*Marge entre le libellé et le chmaps */
  margin-top: 5px;
  /*Largeur des input*/
  width: 250px;
}
 
form .corps-formulaire .droite .boite i{
    position: absolute;
    left: 0;
    top: 25px;
    padding: 9px 8px;
    color: blue;
}
/*Mise en forme du bouton*/
form .pied-formulaire button{
    background-color: #808080;
    color: black;
    border-radius: 5px;
    font-size: 15px;
    border: none;
    text-decoration: none;
    /*Dimension du Btn*/
    padding: 10px 20px;
    outline: none;
    cursor: pointer;
    /*Délais de mouvement lors du survol*/
    transition: transform 0.5s;
    margin-left: 10px;
    margin-right: 10px;
}
 
/*Agrandissement du bouton au survol*/
form .pied-formulaire button:hover{
    transform: scale(1.05);
}
/*Mise en forme du bouton*/
form .pied-formulaire input{
    background-color: #808080;
    color: black;
    border-radius: 5px;
    font-size: 15px;
    border: none;
    /*Dimension du Btn*/
    padding: 10px 20px;
    outline: none;
    cursor: pointer;
    /*Délais de mouvement lors du survol*/
    transition: transform 0.5s;
    margin-left: 10px;
    margin-right: 10px;
}
/*Agrandissement du bouton au survol*/
form .pied-formulaire input:hover{
    transform: scale(1.05);
}
@media screen and (max-widht:920px) {
    form .corps-formulaire .groupe{
        margin-right: 0px;
    }
}
 
/*MISE EN PAGE TABLEAU*/
table a {
  display: block;
  width: 150px;
  height: 20px;
  background-color: #303030;
  color: #4b4b69;
  text-align: center;
  }
 
    #main {
      max-width: 60em;
      margin: auto;
    }
    h1, h2,h3 {
      color: aliceblue;
      margin: .25em 0;
    }
    h4{
      color: aliceblue;
      margin: .25em 0;
      margin-left: 450px;
      font-size: 20px;
    }
    h5{
      color: aliceblue;
      margin: .25em 0;
      margin-left: -120px;
      margin-top: -205px;
    }
    section {
      margin: 1em;
    }
    table {
      border-collapse: collapse;
      margin-left: 450px;
    }
    td,th {
      padding: 0.5em;
      border: 1px solid #888;
    }
    thead {
      background: #EEE;
    }
    thead tr {
      background-color: aliceblue;
      color:  #303030;
    }
    tbody tr:hover {
      cursor:pointer;
      background: #F8F8F8;
      color: #303030;
    }
    label {
      display:inline-block;
      width:8em;
      text-align: left;
    }
    label:after {
      right: 0;
      float: right;
      content: ":\A0";
    }
    .forma {
      max-width: 25em;
    }
    .forma p {
      margin: .25em;
      text-align: center;  
    }
    .forma input {
      font-family: inherit;
      line-height: 1.5em;
      font-size: 1em;
      width: 12em;
    }
    .forma input:not([type=text]) {
      margin:.25em .25em;
      width:6em;
    }
    .fieldseta {
      border:1px solid #888;
      padding: .5em;
      width: 430px;
      margin-left: -120px;
 
    }
 
    .btn {
      /*Design des Btn*/
      background-color: #333;
      color: white;
      border-radius: 5px;
      font-size: 15px;
      text-decoration: none;
      border: 1px solid black;
      /*Dimension du Btn*/
      padding: 10px 30px;
      outline: none;
      cursor: pointer;
      /*Marge entre deux Btn*/
      margin-top: 8px;
      /*Délais de mouvement lors du survol*/
      transition: transform 0.5s;    
  }
  /*Agrandissement du bouton au survol*/
.btn:hover {
  transform: scale(1.1);
  background-color: #808080;
  color: #000;
}
  .btna{
    text-decoration: none;
    color: #e6e6e6;
  }
  table a:hover {
  background-color: #4b4b69;
  color: #e6e6e6;
  }

Merci beaucoup

**NoSmoking** · 10/02/2024, 18h06

Pour le principe avec une modale affichée sur la page.
Il te faut enlever les événements sur les <tr> pour les affecter dans le script.

Il te faut corriger tes

Code html :

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

1
2
3
<td <a href="modale.php" OnClick="window.open('modal.php','update','width=500,height=500');"></a>
  <input type="button" value="Update" />
</td>

... mal construite et tant qu'à faire mettre un élément <button> en lieu et place des <input>, tu pourras mettre un <svg> à l'intérieur.

Lorsque tu cliques sur le <button> update tu lances une fonction qui :