<!-- If the browser does not support frames put the first topic content here --> <div class="WordSection1"> <p class="MsoNormal">A partir du fichier html suivant :</p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'> <html></p> <p class="MsoNormal" style='border:none;padding:0cm'> <head></p> <p class="MsoNormal" style='border:none;padding:0cm'> <!-- les 4 lignes suivantes sont nécessaires pour utiliser bootstrap !--></p> <p class="MsoNormal" style='border:none;padding:0cm'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></p> <p class="MsoNormal" style='border:none;padding:0cm'> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script></p> <p class="MsoNormal" style='border:none;padding:0cm'> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script></p> <p class="MsoNormal" style='border:none;padding:0cm'> </p> <p class="MsoNormal" style='border:none;padding:0cm'> <script src='./messcripts.js'></script></p> <p class="MsoNormal" style='border:none;padding:0cm'> </head></p> <p class="MsoNormal" style='border:none;padding:0cm'> <body></p> <p class="MsoNormal" style='border:none;padding:0cm'> <h1>Saisie des personnes</h1></p> <p class="MsoNormal" style='border:none;padding:0cm'> <form id='f1' action='#'></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="form-group"></p> <p class="MsoNormal" style='border:none;padding:0cm'> Civilité :</p> <p class="MsoNormal" style='border:none;padding:0cm'> <select id='civilite'></p> <p class="MsoNormal" style='border:none;padding:0cm'> <option>Madame</option></p> <p class="MsoNormal" style='border:none;padding:0cm'> <option>Monsieur</option></p> <p class="MsoNormal" style='border:none;padding:0cm'> </select></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="form-group"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <label for="nom">Nom:</label></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="text" class="form-control" placeholder="Saisir le nom" id="nom"></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="form-group"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <label for="prenom">Prénom:</label></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="text" class="form-control" placeholder="Saisir le prénom" id="prenom"></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> <button type="button" class="btn btn-primary">Ajouter</button></p> <p class="MsoNormal" style='border:none;padding:0cm'> <br/></p> <p class="MsoNormal" style='border:none;padding:0cm'> Liste des ajouts :</p> <p class="MsoNormal" style='border:none;padding:0cm'> <select id="aff_pers"></p> <p class="MsoNormal" style='border:none;padding:0cm'> </select></p> <p class="MsoNormal" style='border:none;padding:0cm'> </p> <p class="MsoNormal" style='border:none;padding:0cm'> <br/><br/></p> <p class="MsoNormal" style='border:none;padding:0cm'> <span id="affichageRecap"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <h2>Détails des ajouts</h2></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="card bg-success text-white"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="card-body"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <span id = "details"></p> <p class="MsoNormal" style='border:none;padding:0cm'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'> </form></p> <p class="MsoNormal" style='border:none;padding:0cm'> </body></p> <p class="MsoNormal" style='border:none;padding:0cm'> </html></p> </div> <span style= 'font-size:11.0pt;font-family:"Calibri",sans-serif'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"> </p> <p class="MsoNormal">Et produisant l'affichage ci dessous :</p> <p class="MsoNormal"><span style= 'border:solid windowtext 1.0pt;padding:0cm'><img width="534" height="328" id="Image 4" src= "Td2_perfectionnement_fichiers/image001.png" alt="image" name= "Image 4" /></span></p> <p class="MsoNormal"> </p> <p class="MsoNormal">On voudrait, à partir de scripts javascript :</p> <p class="MsoNormal">Au clic sur le bouton <i>Ajouter</i>, ajouter, à la liste déroulante <i>liste des ajouts</i>, le nom saisi dans la zone input.</p> <p class="MsoNormal">Afficher, dans la zone <i>détails des ajouts,</i> la civilité, le nom et prénom de la personne sélectionnée dans la 2<sup>ème</sup> liste déroulante (<i>liste des ajouts</i>).</p> <p class="MsoNormal"> </p> <p class="MsoNormal">Exemple de résultat obtenu :</p> <p class="MsoNormal"><span style= 'border:solid windowtext 1.0pt;padding:0cm'><img width="533" height="332" id="Image 5" src= "Td2_perfectionnement_fichiers/image002.png" alt="image" name= "Image 5" /></span></p> <p class="MsoNormal"><span style= 'border:solid windowtext 1.0pt;padding:0cm'> </span></p> <p class="MsoNormal"> </p> <p class="MsoNormal">Le fichier html de départ est fourni en ressources dans \\prof\ressources.</p> </div>
Table des matières
Sujets
Recherche
Help content
Help content
Générée avec
chmProcessor
Générée avec
chmProcessor