Afficher les informations d'une ligne selectionnée dans des inputs

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

Voici mon problème je veux que quand je clic sur un bouton qui est dans une ligne d'un tableau html, les informations de la ligne selectionner s'affiche dans des inputs et qu'il ne soit pas modifiable.

Voici mon interface pour mieux comprendre :
Pièce jointe 511091

je veux que quand je clic sur réserver le modal suivant s'affiche, et les inputs du modal stock les informations de la ligne selectionner, voici mon modal :

Pièce jointe 511094

le problème c'est que je ne sais vraiment pas comment faire celà avec du code.

voici le code de ma page jsp si besoin :

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
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
<%@page import="controller.Cnx"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<%@page import="java.util.Map"%>
 
<!DOCTYPE html>
<%
 
Connection c=Cnx.getcnx();
Statement st=c.createStatement();
ResultSet re=st.executeQuery("select * from place");
Statement st2=c.createStatement();
ResultSet re2=st2.executeQuery("select * from local");
%>
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Interface locataire</title>
    <meta name="description" content="Sufee Admin - HTML5 Admin Template">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel="apple-touch-icon" href="apple-icon.png">
    <link rel="shortcut icon" href="favicon.ico">
 
    <link rel="stylesheet" href="vendors/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="vendors/themify-icons/css/themify-icons.css">
    <link rel="stylesheet" href="vendors/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="vendors/selectFX/css/cs-skin-elastic.css">
    <link rel="stylesheet" href="vendors/jqvmap/dist/jqvmap.min.css">
 
 
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="css/Css_acceuil_locataire.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/e3fd0d5f24.js" crossorigin="anonymous"></script>
 
 
    </head>
    <body>
 
        <aside id="left-panel" class="left-panel">
        <nav class="navbar navbar-expand-sm navbar-default" style="flex-flow:column wrap;">
 
            <div class="navbar-header">
 
                <a class="navbar-brand" href="#">Gestion parkings</a>
                <a class="navbar-brand hidden" href="./"><img src="images/logo2.png" alt="Logo"></a>
            </div>
 
            <div id="main-menu" class="main-menu collapse navbar-collapse">
                <ul class="nav navbar-nav">
 
 
                    <li class="nav-item ">
                        <a href="#" class="nav-link"  aria-haspopup="true" aria-expanded="false" style="margin-right: 80px;"> <i class="fas fa-arrow-alt-circle-right" style="margin-right: 10px;" selected></i>Réservation</a>
 
                    </li>
                    <li class="nav-item ">
                        <a href="#" class="nav-link"  aria-haspopup="true" aria-expanded="false" style="margin-right: 80px;"> <i class="fas fa-arrow-alt-circle-right" style="margin-right: 10px;" selected></i>Liste réservation</a>
 
                    </li>
 
 
 
                </ul>
            </div>
        </nav>
    </aside>
 
 
 
    <nav class="navbar" style="height:70px;" id='nav-proprietaire'>
        <ul class="nav navbar-nav">
            <li class="nav-item ">
                        <a href="Page_de_cnx" class="nav-link"  aria-haspopup="true" aria-expanded="false" style="padding-left: 1430px; text-transform: uppercase"> <i class="fas fa-exclamation-circle" style="margin-right: 20px;"></i>Déconnection</a>
 
                    </li>
        </ul>
    </nav>
 
 
        <label id="label1">Liste des places disponibles avec leurs emplacements :</label>
 
        <table class="table table-hover" style="margin-top: 20px;" id="table1">
  <thead>
    <tr class="table-active">
      <th scope="col">Nom local</th>
      <th scope="col">Numéro place</th>
      <th scope="col">Prix par heure</th>
      <th scope="col">Taille</th>
      <th scope="col">Action</th>
 
 
    </tr>
     </thead>
     <%while(re.next()){%> 
     <tr>
 
            <th scope="row"><%=re.getObject(2)%></th>
            <td><%=re.getObject(3)%></td>
            <td><%=re.getObject(4)%></td>
            <td>><%=re.getObject(5)%></td>
            <td>><a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#reservation" name="reservermodal" onclick="afficher()" ><i class="fas fa-plus" style="margin-right: 10px;"></i>Réserver</a></td>
     </tr>
 
 
      <%}%>
 
  <tbody>
 
 
 
 
 
  </tbody>
 
</table>
   <div class="modal" id="reservation">
  <div class="modal-dialog">
    <div class="modal-content">
 
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Information</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
 
      <!-- Modal body -->
      <div class="modal-body">
         <form method="POST" action='Place_locaux'>
            <div class="form-group">
                <label class='labelproprietaire'>Nom du local approprié à la place :</label>
                <select class="browser-default custom-select" placeheader="Search here.." name="nom_local">
 
 
                        <%while(re2.next()){%>
                        <option><%=re2.getObject(2)%></option>
                        <%}%>
                </select>
            </div>
            <div class="form-group">
                <label class='labelproprietaire'>Numéro place :</label>
                <input type="number" class="form-control" id="numeroplace"  name="numeroplace" required>
            </div>
            <div class="form-group">
                <label class='labelproprietaire'>Prix par heure:</label>
                <input type="text" class="form-control" id="prixplace" placeholder="Entrer le prix de la place" name="prixplace" required>
 
            </div>
            <div class="form-group">
                <label class='labelproprietaire'>Taille de la place :</label>
                <input type="text" class="form-control" id="tailleplace" placeholder="Entrer la taille de la place" name="tailleplace" required>
 
            </div>
 
            <div class="form-group">
                <label class='labelproprietaire'>Votre Cin :</label>
                <input type="text" class="form-control" id="Cinlocataire" placeholder="Entrer votre cin" name="cinlocataire" required>
 
            </div>
 
            <div class="form-group">
                <label class='labelproprietaire'>Heure début de la réservation :</label>
                <input type="time" class="form-control" id="heure_debut" placeholder="Entrer l'heure de début" name="heure_debut" required>
 
            </div>
 
            <div class="form-group">
                <label class='labelproprietaire'>Heure fin de la réservation :</label>
                <input type="time" class="form-control" id="heure_fin" placeholder="Entrer l'heure de fin" name="heure_fin" required>
 
            </div>
 
 
 
 
 
 
        </form>
      </div>
 
      <!-- Modal footer -->
      <div class="modal-footer">
 
         <div id='divbtnaddplace'>      
                <button type="submit" class="btn btn-primary btn-lg" id='btnreserver' style='vertical-align: 0; margin-right: 260px;' name='action' value='reserver'>Reserver</button>
 
 
           </div>
        <button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
      </div>
 
    </div>
  </div>
</div>     
 
 
        <script src="vendors/jquery/dist/jquery.min.js"></script>
    <script src="vendors/popper.js/dist/umd/popper.min.js"></script>
    <script src="vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="assets/js/main.js"></script>
 
 
    <script src="vendors/chart.js/dist/Chart.bundle.min.js"></script>
    <script src="assets/js/dashboard.js"></script>
    <script src="assets/js/widgets.js"></script>
    <script src="vendors/jqvmap/dist/jquery.vmap.min.js"></script>
    <script src="vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
    <script src="vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
 
 
    <script>
        /*
        var table= document.getElementById('table1');
        
        for(int i=1; i<table.rows.length; i++){
            function afficher(){
             document.getElementById('nom_local').value=this.cells[0].innerHtml;
             document.getElementById('numeroplace').value=this.cells[1].innerHtml;
             document.getElementById('prixplace').value=this.cells[2].innerHtml;
             document.getElementById('tailleplace').value=this.cells[3].innerHtml;
            }
        }
        */
 
       function afficher(){
 
           var row=$(this);
           var nom_local=row.closest("tr").find("td:eq(0)").text();
           $("#nom_local").val(nom_local);
 
           var numeroplace=row.closest("tr").find("td:eq(1)").text();
           $("#numeroplace").val(numeroplace);
       });
    </script>
    </body>
</html>

Comme vous pouvez le voir j'ai testé deux code javascript ( le premier en commentaire et le deuxiemen en dessous) mais rien ne marche :

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
<script>
        /*
        var table= document.getElementById('table1');
        
        for(int i=1; i<table.rows.length; i++){
            function afficher(){
             document.getElementById('nom_local').value=this.cells[0].innerHtml;
             document.getElementById('numeroplace').value=this.cells[1].innerHtml;
             document.getElementById('prixplace').value=this.cells[2].innerHtml;
             document.getElementById('tailleplace').value=this.cells[3].innerHtml;
            }
        }
        */
 
       function afficher(){
 
           var row=$(this);
           var nom_local=row.closest("tr").find("td:eq(0)").text();
           $("#nom_local").val(nom_local);
 
           var numeroplace=row.closest("tr").find("td:eq(1)").text();
           $("#numeroplace").val(numeroplace);
       });
    </script>

Rien ne marche quelqu'un peut bien m'aider s'il vous plait ?

Salut,

imaginons ta page schématiquement:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 
 
<title>...</title> 
<head>
 
<style type="text/css">
table{
        margin:20px;
        border-collapse:collapse;
}
 
td {
        border:solid;
}
</style>
 
</head>
<body>
 
<table>
<thead>
<td>Info 1</td>
<td>Info 2</td>
<td>Info 3</td>
<td>Info 4</td>
<td>réserver</td>
</thead>
<tbody id="corps">
<tr>
<td>pêche</td>
<td>pomme</td>
<td>poire</td>
<td>abricot</td>
<td><button>réserver</button></td>
 
</tr>
<tr>
<td>lundi</td>
<td>mardi</td>
<td>mercredi</td>
<td>jeudi</td>
<td><button>réserver</button></td>
</tr>
</tbody>
</table>
 
<form id="f">
<div>
<input readonly name="un" type="text" />     
<input readonly name="deux" type="text" />     
<input readonly name="trois" type="text" />     
<input readonly name="quatre" type="text" />     
 
<button id="conf">Confirmer</button>
</div>
</form>
 
</body>
</html>

Le script peut donner ça

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.addEventListener("load",()=> {
 
const check=document.getElementById("corps");
const but=check.getElementsByTagName("button");
 
for(let b of but){
	b.addEventListener("click",(e)=> {
		let ligne=e.target.parentNode.parentNode;
		for(let i=0;i<ligne.cells.length;i++){
			document.getElementById("f").elements[i].value=ligne.cells[i].textContent
		}
	},
	false);
}
},
true);

Bonjour,

j'ai esseyé ton code mais il ne marche pas :(

voici ma page jsp actuelle :

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
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
<%@page import="controller.Cnx"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<%@page import="java.util.Map"%>
 
<!DOCTYPE html>
<%
 
Connection c=Cnx.getcnx();
Statement st=c.createStatement();
ResultSet re=st.executeQuery("select * from place");
Statement st2=c.createStatement();
ResultSet re2=st2.executeQuery("select * from local");
%>
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Interface locataire</title>
    <meta name="description" content="Sufee Admin - HTML5 Admin Template">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel="apple-touch-icon" href="apple-icon.png">
    <link rel="shortcut icon" href="favicon.ico">
 
    <link rel="stylesheet" href="vendors/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="vendors/themify-icons/css/themify-icons.css">
    <link rel="stylesheet" href="vendors/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="vendors/selectFX/css/cs-skin-elastic.css">
    <link rel="stylesheet" href="vendors/jqvmap/dist/jqvmap.min.css">
 
 
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="css/Css_acceuil_locataire.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/e3fd0d5f24.js" crossorigin="anonymous"></script>
 
 
    </head>
    <body>
 
        <aside id="left-panel" class="left-panel">
        <nav class="navbar navbar-expand-sm navbar-default" style="flex-flow:column wrap;">
 
            <div class="navbar-header">
 
                <a class="navbar-brand" href="#">Gestion parkings</a>
                <a class="navbar-brand hidden" href="./"><img src="images/logo2.png" alt="Logo"></a>
            </div>
 
            <div id="main-menu" class="main-menu collapse navbar-collapse">
                <ul class="nav navbar-nav">
 
 
                    <li class="nav-item ">
                        <a href="#" class="nav-link"  aria-haspopup="true" aria-expanded="false" style="margin-right: 80px;"> <i class="fas fa-arrow-alt-circle-right" style="margin-right: 10px;" selected></i>Réservation</a>
 
                    </li>
                    <li class="nav-item ">
                        <a href="#" class="nav-link"  aria-haspopup="true" aria-expanded="false" style="margin-right: 80px;"> <i class="fas fa-arrow-alt-circle-right" style="margin-right: 10px;" selected></i>Liste réservation</a>
 
                    </li>
 
 
 
                </ul>
            </div>
        </nav>
    </aside>
 
 
 
    <nav class="navbar" style="height:70px;" id='nav-proprietaire'>
        <ul class="nav navbar-nav">
            <li class="nav-item ">
                        <a href="Page_de_cnx" class="nav-link"  aria-haspopup="true" aria-expanded="false" style="padding-left: 1430px; text-transform: uppercase"> <i class="fas fa-exclamation-circle" style="margin-right: 20px;"></i>Déconnection</a>
 
                    </li>
        </ul>
    </nav>
 
 
        <label id="label1">Liste des places disponibles avec leurs emplacements :</label>
 
        <table class="table table-hover" style="margin-top: 20px;" id="table1">
  <thead>
    <tr class="table-active">
      <th scope="col">Nom local</th>
      <th scope="col">Numéro place</th>
      <th scope="col">Prix par heure</th>
      <th scope="col">Taille</th>
      <th scope="col">Action</th>
 
 
    </tr>
     </thead>
     <%while(re.next()){%> 
      <tbody id="corps">
     <tr>
 
            <th scope="row"><%=re.getObject(2)%></th>
            <td><%=re.getObject(3)%></td>
            <td><%=re.getObject(4)%></td>
            <td>><%=re.getObject(5)%></td>
            <td>><a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#reservation" name="reservermodal" onclick="afficher()" ><i class="fas fa-plus" style="margin-right: 10px;"></i>Réserver</a></td>
     </tr>
 
 
      <%}%>
 
 
 
 
 
 
 
  </tbody>
 
</table>
   <div class="modal" id="reservation">
  <div class="modal-dialog">
    <div class="modal-content">
 
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Information</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
 
      <!-- Modal body -->
      <div class="modal-body">
         <form method="POST" id="f">
            <div class="form-group">
                <label class='labelproprietaire'>Nom du local approprié à la place :</label>
                <select class="browser-default custom-select" placeheader="Search here.." name="nom_local">
 
 
                        <%while(re2.next()){%>
                        <option><%=re2.getObject(2)%></option>
                        <%}%>
                </select>
            </div>
            <div class="form-group">
                <label class='labelproprietaire'>Numéro place :</label>
                <input type="number" class="form-control" id="numeroplace"  name="numeroplace" required>
            </div>
            <div class="form-group">
                <label class='labelproprietaire'>Prix par heure:</label>
                <input type="text" class="form-control" id="prixplace" placeholder="Entrer le prix de la place" name="prixplace" required>
 
            </div>
            <div class="form-group">
                <label class='labelproprietaire'>Taille de la place :</label>
                <input type="text" class="form-control" id="tailleplace" placeholder="Entrer la taille de la place" name="tailleplace" required>
 
            </div>
 
            <div class="form-group">
                <label class='labelproprietaire'>Votre Cin :</label>
                <input type="text" class="form-control" id="Cinlocataire" placeholder="Entrer votre cin" name="cinlocataire" required>
 
            </div>
 
            <div class="form-group">
                <label class='labelproprietaire'>Heure début de la réservation :</label>
                <input type="time" class="form-control" id="heure_debut" placeholder="Entrer l'heure de début" name="heure_debut" required>
 
            </div>
 
            <div class="form-group">
                <label class='labelproprietaire'>Heure fin de la réservation :</label>
                <input type="time" class="form-control" id="heure_fin" placeholder="Entrer l'heure de fin" name="heure_fin" required>
 
            </div>
 
 
 
 
 
 
        </form>
      </div>
 
      <!-- Modal footer -->
      <div class="modal-footer">
 
         <div id='divbtnaddplace'>      
                <button type="submit" class="btn btn-primary btn-lg" id='btnreserver' style='vertical-align: 0; margin-right: 260px;' name='action' value='reserver'>Reserver</button>
 
 
           </div>
        <button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
      </div>
 
    </div>
  </div>
</div>     
 
 
        <script src="vendors/jquery/dist/jquery.min.js"></script>
    <script src="vendors/popper.js/dist/umd/popper.min.js"></script>
    <script src="vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="assets/js/main.js"></script>
 
 
    <script src="vendors/chart.js/dist/Chart.bundle.min.js"></script>
    <script src="assets/js/dashboard.js"></script>
    <script src="assets/js/widgets.js"></script>
    <script src="vendors/jqvmap/dist/jquery.vmap.min.js"></script>
    <script src="vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
    <script src="vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
 
 
    <script>
        function afficher(){
            window.addEventListener("load",()=> {
               const check=document.getElementById("corps"); 
               const but=check.getElementsByTagName("a");
               for(let b of but){
                   b.addEventListener("click",(e)=> {
                   let ligne=e.target.parentNode.parentNode;
                   for(let i=0;i<ligne.cells.length;i++){
			document.getElementById("f").elements[i].value=ligne.cells[i].textContent;
		}
                   },false);
               }
            },true);
 
 
        };
 
    </script>
    </body>
</html>

et voici mon code js meme si j'ai pas trop compris le code que tu m'as donné xd :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
        function afficher(){
            window.addEventListener("load",()=> {
               const check=document.getElementById("corps"); 
               const but=check.getElementsByTagName("a");
               for(let b of but){
                   b.addEventListener("click",(e)=> {
                   let ligne=e.target.parentNode.parentNode;
                   for(let i=0;i<ligne.cells.length;i++){
			document.getElementById("f").elements[i].value=ligne.cells[i].textContent;
		}
                   },false);
               }
            },true);
 
 
        };
 
    </script>

19/10/2019, 16h49
javatwister

Citation:

j'ai esseyé ton code mais il ne marche pas

Eh oui... c'est l'éternel problème :weird:

Aux lignes 112, 113 , tu as 2 erreurs de nature différente:

- un ">" se balade en début de <td>

- Tu appelles une fonction "afficher()" que je ne me souviens pas avoir écrite...
19/10/2019, 17h12
toztoztoze

1 pièce(s) jointe(s)

Re bonjour,

En ce qui concerne l'erreur des ">" je l'ai corrigé.

Pour la methode afficher je l'ai juste mis pour que je puisse l'appeler dans mon bouton avec le onclick mais maintenant je l'ai enlevé.

Pour le moment ton code marche ! mais il marche juste pour la premiere ligne, quand je clic sur réserver de la 1ere ligne il m'affiche les informations comme prévu voici un petit screen du résultat :

Pièce jointe 511234

il y a 2 problèmes maintenant :

-le premier c'est qu'il m'affiche la valeur "reserver" dans le cin alors que sur le champs cin il ne doit rien afficher c'est l'utilisateur qui doit le saisir

-le deuxieme c'est que quand je clic sur une autre ligne exemple la deuxieme ou troisieme ligne il m'affiche toujours les infos de la premiere ligne, j'espere que tu me comprends xd (ce sont juste les infos de la premiere ligne qui s'affiche meme si je clic sur le bouton reserver associé à une autre ligne normalement si je clic sur reserver de la deuxieme ligne il doit m'afficher les infos de la 2eme lignes ! mais malheureusement il m'affiche juste de la premiere)

et merci pour ton aide d'avance
19/10/2019, 17h34
javatwister

Le "Réserver", c'est un peu de ma faute; j'avais fait à l'arrache le modèle et la boucle;
adapte en remplaçant ligne.cells.length par ligne.cells.length-1 à la ligne suivante

Code:

for(let i=0;i<ligne.cells.length;i++){
19/10/2019, 17h39
toztoztoze

Super ça marche !

il reste plus que le deuxième problème maintenant et tout sera bon !
19/10/2019, 17h44
javatwister

Alors là t'as dû faire une erreur ailleurs, je n'ai pas ce problème quand je teste; désolé, j'ai une course à faire! Bonne chance :)
19/10/2019, 17h54
toztoztoze

je ne sais vraiment pas ou est l'erreur depuis tout taleur que je cherche ! pourtant j'ai fais la meme chose que toi je ne comprends pas pk j'ai cette erreur et toi no mdr.

Au pire je t'att car ça fais mtn 3 jours que je suis bloqué sur ça :(

Bonne course bro !

Salut,

En jQuery je pense que c'est moins de code.

Il faut supprimer l'attribut onclick du bouton .btn et utiliser jQuery proprement :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
/* afficher */
function afficher(e){
   e.preventDefault();//pour inhiber le lien, parce que le bouton .btn est un <a href="#">
   var tr=$(this).closest('tr');
    $('#f .custom-select')
        .html('<option value="'+tr.find('td:eq(0)').text()+'">'+tr.find('td:eq(0)').text()+'</option>')
        .prop('disabled',true);//désactivation
 
    $('#numeroplace').val(tr.find('td:eq(1)').text())
    .prop('disabled',true);//désactivation
 
    $('#prixplace').val(tr.find('td:eq(2)').text())
    .prop('disabled',true);//désactivation
 
    $('#tailleplace').val(tr.find('td:eq(3)').text())
    .prop('disabled',true)//désactivation;
}
/* Quand le document est prêt */
$(document).ready(function(){
     $('#table1').on('click','#corps .btn',afficher);
});

19/10/2019, 18h26
toztoztoze

2 pièce(s) jointe(s)

salut toufik,

j'ai testé ton code, le problème qui était tout à l'heure est résolu ce qui veux dire que à chaque fois que je clic sur une ligne il m'affiche ses propres infos, mais il y a toujours un soucis c'est quand les informations ne sont pas placé sur les bons input ! voici une image du résultat obtenu :

Pièce jointe 511250

comme tu vois dans nom local il m'affiche un numero ( le numero 2 qu'il affiche il correspond à le numero de place il doit etre afficher dans le 2eme input alors que moi je veux le nom sur le premier input), dans le input numero place il m'affiche rien, prix par heure il m'affiche 5m ce qui correspond à la taille cette info doit etre affiché au input suivant, et pour la taille il m'affiche reserver je ne sais pas pourquoi.

Si tu veux bien m'aider à résoudre ce problème je te serai vraiment trés reconnaissent voici le shèma de ma table si tu as besoin :

Pièce jointe 511254
19/10/2019, 18h32
Toufik83
tout est dans :eq, quand on met :eq(0) cela veux dire cibler la première td de la ligne, :eq(1) c'est la deuxième... et ainsi de suite.

Fais attention à un <th> qui traîne au début du #corps
Code:

1 2 3 4 <th scope="row"><%=re.getObject(2)%></th> <td><%=re.getObject(3)%></td> ...
19/10/2019, 18h37
javatwister

De toute façon ta balise lien c'est un très mauvais moyen d'activer un script. D'où le button...
Je regarderai demain au cas où j'aie raté qqch dans ton code.

oui je comprends mais j'ai fais les positions exacte je ne sais pas pourquoi ça m'affiche comme ça.... voici mon code jquery :

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
 <script>
 
        function afficher(e){
   e.preventDefault();//pour inhiber le lien, parce que le bouton .btn est un <a href="#">
   var tr=$(this).closest('tr');
    $('#f .custom-select')
        .html('<option value="'+tr.find('td:eq(0)').text()+'">'+tr.find('td:eq(0)').text()+'</option>')
        .prop('disabled',true);
 
    $('#nom_local').val(tr.find('td:eq(0)').text());
 
    $('#numeroplace').val(tr.find('td:eq(1)').text());
 
    $('#prixplace').val(tr.find('td:eq(2)').text());
 
    $('#tailleplace').val(tr.find('td:eq(3)').text());
}
/* Quand le document est prêt */
$(document).ready(function(){
     $('#table1').on('click','#corps .btn',afficher);
});   
 
 
 
    </script>

et voici la table :

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
<table class="table table-hover" style="margin-top: 20px;" id="table1">
  <thead>
    <tr class="table-active">
      <th scope="col">Nom local</th>
      <th scope="col">Numéro place</th>
      <th scope="col">Prix par heure</th>
      <th scope="col">Taille</th>
      <th scope="col">Action</th>
 
 
    </tr>
     </thead>
     <%while(re.next()){%> 
      <tbody id="corps">
     <tr>
 
            <th scope="row"><%=re.getObject(2)%></th>
            <td><%=re.getObject(3)%></td>
            <td><%=re.getObject(4)%></td>
            <td><%=re.getObject(5)%></td>
            <td><a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#reservation" name="reservermodal" ><i class="fas fa-plus" style="margin-right: 10px;"></i>Réserver</a></td>
     </tr>
 
 
      <%}%>
 
 
 
 
 
 
 
  </tbody>
 
</table>

comme tu vois les positions son exacte

19/10/2019, 18h40
toztoztoze

ah oui je viens de voir le th merci beaucoup enfin ça marche merci beaucoup !!!
19/10/2019, 18h44
toztoztoze
Juste avant de fermé le sujet peut tu m'expliquer s'il te plait quelque truc sur ton code que je ne comprends pas ( je suis toujours un débutant) comme :

Code:

$('#f .custom-select')

et
Code:

1 2 .html('<option value="'+tr.find('td:eq(0)').text()+'">'+tr.find('td:eq(0)').text()+'</option>') .prop('disabled',true);
et

Code:

e.preventDefault();

j'ai vu que tu as mis un commentaire mais je ne sais pas ce que tu voulais dire par "inhiber le lien"

Et merci beaucoup à vous 2 merci bcp !!!

1-$('#f .custom-select') la on cible le <select> ayant la classe custom-select qui se trouve dans le <form id="f"> c'est pareil que

Code:

$("#f").find('.custom-select')

2-
Code:

1 2 3 .html('<option value="'+tr.find('td:eq(0)').text()+'">'+tr.find('td:eq(0)').text()+'</option>')//on remplace TOUT l'html du select par une nouvelle option avec la valeur souhaitée. .prop('disabled',true);//on désactive le <select> comme tu as demandé...
3- on utilise e.preventDefault() seulement pour les <a> ayant l'attribut href, cette instruction empêche le navigateur de suivre le lien du href.

19/10/2019, 18h55
toztoztoze

OK merci beaucoup j'ai tout compris sur le ".prop" pour desactiver un select il faut toujours utilisé se ".prop" ? il veut signifier quoi déjà ?
19/10/2019, 19h00
Toufik83

J'ai l'habitude d'utiliser .prop parce qu'elle est plus sûre que .attr (surtout dans une condition if)

prop signifie property en anglais et propriété en français.

voir la différence entre .attr et .prop.
19/10/2019, 19h03
toztoztoze

Ah ok merci encore une fois bro !