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
| <!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<!-- cache-control avec max-age=60 pour le développement uniquement -->
<meta http-equiv="cache-control" content="public, max-age=60">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="author" content="Daniel Hagnoul">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<title>test</title>
<style>
*,
*:after,
*:before {
box-sizing: border-box;
}
/* CSS du test */
form[name='monForm'] {
margin: 0.3rem;
padding: 0.3rem;
border: 1pt dotted grey;
}
/* Fin CSS du test */
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
<script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.4.0.js"></script>
<script>
'use strict';
document.addEventListener( "DOMContentLoaded", ev => {
// le DOM est construit, la page web n'est pas visible
moment.locale( "fr" );
klog( `DOM ready : ${ new kDvjhDate() }` );
// code du test
// fin code du test
}, false );
window.addEventListener( "load", ev => {
// le DOM est construit et la page web est visible
klog( `Window load : ${ new kDvjhDate() }` );
// code du test
const
elemBtnSuivant = k$( "#btnSuivant" ),
elemNomDepartement = k$( "#Nom_departement"),
elemDateArrive = k$( "#Date_Arrive"),
elemDateDepart = k$( "#Date_depart"),
elemDescription = k$( "#Description"),
elemCritique = k$( "#Critique"),
elemTableDepartement = k$( "#tableDepartement > tbody" ),
elemFormDepartement = k$( "form[name='monForm']" ),
elemTR = document.createElement( "tr" ),
elemTD = document.createElement( "td" );
elemBtnSuivant.addEventListener( "click", ev => {
ev.stopPropagation();
ev.preventDefault();
let
myTR = elemTR.cloneNode( true ),
arTemp = [ elemTD.cloneNode( true ), elemTD.cloneNode( true ), elemTD.cloneNode( true ), elemTD.cloneNode( true ), elemTD.cloneNode( true ) ];
arTemp[0].textContent = elemNomDepartement.value;
arTemp[1].textContent = elemDateArrive.value;
arTemp[2].textContent = elemDateDepart.value;
arTemp[3].textContent = elemDescription.value;
arTemp[4].textContent = elemCritique.value;
for (const item of arTemp ){
myTR.appendChild( item );
}
elemTableDepartement.appendChild( myTR );
elemFormDepartement.reset();
}, false );
// fin code du test
kIDUnique();
}, false );
</script>
</head>
<body>
<main>
<form name="monForm" >
<div class="col-lg-12 well">
<div class="row">
<div id="surf" class="col-sm-6 form-group">
<label>Nom du departement</label>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" name="Nom_departement" id="Nom_departement" placeholder="Donner un nom à votre formation" class="form-control">
</div>
<div class="col-lg-12 well">
<div class="col-sm-6 form-group">
<label>Date d'arrivé</label>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="date" name="Date_Arrive" id="Date_Arrive" placeholder="Saisir la Date d'arrivé" class="form-control">
</div>
</div>
<div class="col-sm-6 form-group">
<label>Date de depart</label>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="date" name="Date_depart" id="Date_depart" placeholder="Saisir la Date de depart" class="form-control">
</div>
</div>
<div class="col-sm-6 form-group">
<label>Description de l'emplacement</label>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" name="Description" id="Description" placeholder="Saisir le nom de l'entreprise" class="form-control">
</div>
</div>
<div class="col-sm-6 form-group">
<label>Critique</label>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" name="Critique" id="Critique" placeholder="Saisir le lieu" class="form-control">
</div>
</div>
</div>
</div>
<!--
<div class="col-sm-6 form-group">
<label>Ajouter un autre departement</label>
<div class="input-group-btn">
<button class="btn btn-success" onclick="addHtmlTableRow()" type="button">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
-->
</div>
</div>
<div>
<table id="tableDepartement" class="table table-bordered">
<thead>
<tr>
<th>Nom du departement</th>
<th>Date d'arrivé</th>
<th>Date de depart</th>
<th>Description de l'emplacement</th>
<th>Critique</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="input-group-btn">
<button id="btnSuivant" class="btn btn-sucess">Suivant</button>
</div>
</form>
</main>
</body>
</html> |
Partager