IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

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


Sujet :

jQuery

  1. #1
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    115
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2019
    Messages : 115
    Points : 93
    Points
    93
    Par défaut Afficher les informations d'une ligne selectionnée dans des inputs
    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 :
    Nom : dev 1.PNG
Affichages : 311
Taille : 39,7 Ko

    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 :

    Nom : dev 2.PNG
Affichages : 314
Taille : 24,0 Ko

    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 : 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
    <%@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 : 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
    <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 ?

  2. #2
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    Salut,

    imaginons ta page schématiquement:

    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
    <!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 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
    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);

  3. #3
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    115
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2019
    Messages : 115
    Points : 93
    Points
    93
    Par défaut
    Bonjour,

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

    voici ma page jsp actuelle :

    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
    <%@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 : 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
    <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>

  4. #4
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    j'ai esseyé ton code mais il ne marche pas
    Eh oui... c'est l'éternel problème


    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...

  5. #5
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    115
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2019
    Messages : 115
    Points : 93
    Points
    93
    Par défaut
    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 :

    Nom : dev 2.PNG
Affichages : 251
Taille : 15,5 Ko

    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

  6. #6
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    for(let i=0;i<ligne.cells.length;i++){

  7. #7
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    115
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2019
    Messages : 115
    Points : 93
    Points
    93
    Par défaut
    Super ça marche !

    il reste plus que le deuxième problème maintenant et tout sera bon !

  8. #8
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    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

  9. #9
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    115
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2019
    Messages : 115
    Points : 93
    Points
    93
    Par défaut
    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 !

  10. #10
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    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 : 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
     
    /* 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);
    });

  11. #11
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    115
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2019
    Messages : 115
    Points : 93
    Points
    93
    Par défaut
    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 :

    Nom : dev 2.PNG
Affichages : 258
Taille : 15,4 Ko

    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 :

    Nom : table place.PNG
Affichages : 234
Taille : 6,5 Ko

  12. #12
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <th scope="row"><%=re.getObject(2)%></th><!-- Ceci doit être un TD pas un TH -->
    <td><%=re.getObject(3)%></td>
    ...

  13. #13
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    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.

  14. #14
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    115
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2019
    Messages : 115
    Points : 93
    Points
    93
    Par défaut
    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 : 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
     <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 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
    <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

  15. #15
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    115
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2019
    Messages : 115
    Points : 93
    Points
    93
    Par défaut
    ah oui je viens de voir le th merci beaucoup enfin ça marche merci beaucoup !!!

  16. #16
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    115
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2019
    Messages : 115
    Points : 93
    Points
    93
    Par défaut
    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 :
    et

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    .html('<option value="'+tr.find('td:eq(0)').text()+'">'+tr.find('td:eq(0)').text()+'</option>')
            .prop('disabled',true);
    et

    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 !!!

  17. #17
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#f").find('.custom-select')
    2-
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  18. #18
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    115
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2019
    Messages : 115
    Points : 93
    Points
    93
    Par défaut
    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. #19
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    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.

  20. #20
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    115
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2019
    Messages : 115
    Points : 93
    Points
    93
    Par défaut
    Ah ok merci encore une fois bro !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Débutant] Récuperer les informations d'une ligne sélectionnée dans un datagrid
    Par ejourdan dans le forum Silverlight
    Réponses: 1
    Dernier message: 19/04/2013, 16h10
  2. Afficher les informations sur une même ligne
    Par JayenseN dans le forum PL/SQL
    Réponses: 2
    Dernier message: 24/05/2012, 16h12
  3. Afficher les information liées à une sélection dans un UserForm
    Par zelda12 dans le forum Macros et VBA Excel
    Réponses: 2
    Dernier message: 18/12/2010, 12h56
  4. afficher les informations d'une liste dans la jsp
    Par mystro7200 dans le forum Struts 1
    Réponses: 18
    Dernier message: 11/09/2008, 15h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo