Bonjour à tous.
Je vais essayé d'être le plus clair possible.
J'ai codé un formulaire avec une ligne de plusieurs balises positionné dans un tableau "theab" "tbody".
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
| <div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Encadrement et Animation</h6>
</div>
<div class="card-body">
<div>
<button onclick="javascript:void(0);" class="btn btn-primary add_button">Ajouter une personne</button>
</div>
<div class="table-responsive mt-2">
<table class=" " id="dataTable" width="100%" cellspacing="0">
<thead>
<tr class="align-middle text-center">
<th>Intervenant / Encadrant</th>
<th>Début d'intervention</th>
<th>Fin d'intervention</th>
<th></th>
</tr>
</thead>
<tbody class="field_wrapper">
<tr>
<td><input type="text" class="form-control" id="nom_intervenant"></td>
<td><input type="datetime-local" class="form-control" id="dateheure_debut_intervention""></td>
<td><input type="datetime-local" class="form-control"
id="dateheure_fin_intervention"></td>
<td class="align-middle text-center"><a href="javascript:void(0);" class="remove_button"
title="Supprimer l'intervenant">
<img src=".\img\trash-solid.svg" width="20" />
</a></td>
</tr> |
Je souhaiterais, lorsque l'utilisateur clic sur le bouton ajouter, insérer un bloc "html" ajoutant une nouvelle ligne.
Ne maîtrisant pas Js, j'ai cherché sur le net et suis tombé sur ce bout de code qui semble parfait pour ce que je souhaite faire :
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 type="text/javascript">
$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div><tr> <td><input type="text" class="form-control" id="nom_intervenant"></td> <td><input type="datetime-local" class="form-control" id="dateheure_debut_intervention""></td> <td><input type="datetime-local" class="form-control" id="dateheure_fin_intervention"></td> <td class="align-middle text-center"><a href="javascript:void(0);" class="remove_button" title="Supprimer l\'intervenant"> <img src="./img/trash-solid.svg" width="20" /> </a></td> </tr></div>'; //New input field html
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function(){
//Check maximum number of input fields
if(x < maxField){
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
</script> |
Cela fonctionne sauf que... Lorsque je clic sur le bouton, la ligne s'ajoute mais tous les champs se trouve sur la première colonne. (La fonction ajouter / supprimer fonctionne correctement.)
J'ai donc modifié le bloc à ajouter en supprimant la balise "div" pour ne laisser que la balise "tr". Cette fois ci, cela fonctionne et m'insère correctement les données sur ma page mais la fonction "supprimé" ne fonctionne plus.
J'ai modifié
$(this).parent('div').remove(); //Remove field html
en
$(this).parent('tr').remove(); //Remove field html
mais cela ne fonctionne pas.
Il doit probablement me manquer quelque-chose mais je ne trouve pas quoi.
Merci d'avance pour l'aide précieuse que vous pourrez m'apporter.
Je précise que je n'utilise peut-être pas la bonne méthode et suis prêt à changer complétement le script si besoin mais mes compétences en Js sont toutes récentes.
Partager