Récupérez le zip qui contient le fichier HTML et le fichier JavaScript.
Vous avez une intégration avec un tableau des utilisateurs en dur (inscrit directement dans le HTML), le but de cette étape est de dynamiser la liste des utilisateurs.
let users = [
{
firstName : "Marc",
lastName : "Beaufort",
email : "marc.beaufort@test.fr",
active : true
},
{
firstName : "Lucie",
lastName : "Carmin",
email : "lucie.carmin@test.fr",
active : true
},
{
firstName : "Armand",
lastName : "Perrot",
email : "armand.perrot@test.fr",
active : false
},
{
firstName : "Sarah",
lastName : "Calmels",
email : "sarah.calmels@test.fr",
active : true
},
];
Utilisez le tableau ci-dessus et ce que vous avez appris sur la création d’éléments HTML pour rendre cette <table> dynamique et faire en sorte qu’elle affiche les données du tableau JavaScript.
Je vais devoir faire une boucle sur mon tableau.
<tr>
<td>
1
</td>
<td>
Sarah
</td>
<td>
Connor
</td>
<td>
wrongdoor@gmail.com
</td>
<td>
Active
</td>
<td>
<button type="button" class="btn btn-primary"><span class="bi bi-eye-fill"></span></button>
<button type="button" class="btn btn-success"><span class="bi bi-pencil-fill"></span></button>
<button type="button" class="btn btn-danger"><span class="bi bi-trash-fill"></span></button>
</td>
</tr>
Je vais devoir utiliser des document.createElementpour générer du HTML.
Je vais devoir remplir mes éléments avec les infos du tableau.
Je vais devoir les insérer quelque part : à la fin du tbody.
Il faudra que je vide le tbody dans mon fichier HTML.
Mes utilisateurs n’ont pas d’id dans le tableau js, du coup je vais utiliser : “numéro de la case du tableau + 1”.
Récupérez le zip qui contient le fichier HTML et le fichier JavaScript.
Récupérez votre code de l’étape 1 et faites en sorte qu’il s’applique sur l’étape 2.
Dans cette étape, une fenêtre modal déclenchée par le bouton “Ajouter un utilisateur” a été ajoutée. Elle contient un formulaire qui permet de créer un utilisateur.
Faites en sorte qu’au clic sur le bouton de confirmation de la modal vous récupériez les informations du formulaire pour ajouter un utilisateur dans le tableau users que vous utilisez pour afficher la <table>.
Rajouter un écouteur d’évenement au bouton sauvegarder.
Au clic sur le bouton, récupérer les valeurs des champs et les stocker dans un objet javascript.
Faire un console.logde l’objet JavaScript.
Récupérez le zip qui contient le fichier HTML et le fichier JavaScript.
Récupérez votre code de l’étape 2 et faites en sorte qu’il s’applique sur l’étape 3.
Dans cette étape, une fenêtre modal déclenchée par les boutons “Supprimer un utilisateur” a été ajoutée.
Faites en sorte de récupérer la valeur de l’attribut data-bs-user pour modifier le texte du modal-body pour préciser dans la modal, l’utilisateur qui va être supprimé.
const deleteModal = document.getElementById('deleteUserModal');
deleteModal.addEventListener('show.bs.modal', function(event){
// Le bouton qui a déclenché l'évènement
const button = event.relatedTarget;
const user = button.getAttribute('data-bs-user');
// Ici vous pouvez faire en sorte de modifier le modal-body
});
À la confirmation de la suppression faites en sorte de retirer l’utilisateur du tableau users.
Récupérez le zip qui contient le fichier HTML et le fichier JavaScript.
Récupérez votre code de l’étape 3 et faites en sorte qu’il s’applique sur l’étape 4.
Dans cette étape nous avons rajouté un filtre au dessus de la <table> qui devrait vous rappeler quelque chose. L’idée ici est de filtrer directement le tableau users en créant un nouveau tableau avec uniquement les lignes que nous voulons afficher.
Récupérez le zip qui contient le fichier HTML et le fichier JavaScript.
Récupérez votre code de l’étape 4 et faites en sorte qu’il s’applique sur l’étape 5.
Dans cette étape nous avons rajouté un formulaire de recherche au-dessus de la <table>. Ce formulaire va servir à chercher dans les champs firstName et lastName du tableau users.
Pour rechercher dans le tableau, vous allez pouvoir utiliser la fonction String.includes La documentation de la fonction.