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
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="fr">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" href="./assets/css/base.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="lignebanque">
<div class="form-row">
<div class="col-md-3"><div class="position-relative form-group"><input data-ligne="" name="toto" placeholder="" type="text" class="form-control" ></div></div>
<div class="col-md-4"><div class="position-relative form-group"><input data-ligne="" name="tata" placeholder="" type="text" class="form-control" ></div></div>
<div class="col-md-4"><div class="position-relative form-group"><input data-ligne="" name="titi" placeholder="" type="text" class="form-control" ></div></div>
<div class="col-md-1"><div class="position-relative form-group"><br><label for="exajout" class="ajouterligne">+</label> <label for="exsupp" class="supprimerligne">-</label></div></div>
</div>
</div>
<script >
$(document).ready(function() {
var idA=0,
ligne=$('<div class="form-row">\
<div class="col-md-3"><div class="position-relative form-group"><input data-ligne="" name="toto" placeholder="" type="text" class="form-control" ></div></div>\
<div class="col-md-4"><div class="position-relative form-group"><input data-ligne="" name="tata" placeholder="" type="text" class="form-control" ></div></div>\
<div class="col-md-4"><div class="position-relative form-group"><input data-ligne="" name="titi" placeholder="" type="text" class="form-control" ></div></div>\
<div class="col-md-1"><div class="position-relative form-group"><br><label for="exajout" class="ajouterligne">+</label> <label for="exsupp" class="supprimerligne">-</label></div></div>\
</div>');
$(".lignebanque")
.on("click",".ajouterligne",function(){//ajouter
idA++;//incrémenter idA
ligne.clone()//faire une copie de ligne
.find('[data-ligne]')//trouver [data-ligne] dans ligne
.attr("data-ligne",idA)//attribuer un data-ligne dynamiquement
.closest('.form-row')//revenir au parent supérieur ".form-row"
.appendTo(".lignebanque")//ajouter ligne à ".lignebanque"
})
.on("click",".supprimerligne",function(){//supprimer
$(this).closest(".form-row").remove();//supprime le parent supérieur de ".supprimerligne" sur lequel on clic, qui est le ".form-row"
})
.on("blur","input[data-ligne]",function(){//blur
envoi(this);
})
});
</script>
</body>
</html> |
Partager