OFPPT Office de la Formation Professionnelle

et de la Promotion du Travail

ISTA INZEGANE

Année de formation : 2022 /2023

Filière : Développement digital TC TP : Manipuler le DOM

Formation : Initiale Module : Programmer en JS

Exercice

Soit le tableau ci-dessous contenant 10 produits :

Travail à faire :
1. Créer un élément html table ayant id tblProduits (avec HTML)
2. Écrire une fonction loadData() qui affiche les produits dans la table
3. Mettre en forme l’élément table avec js

M.CHAKOUJ
 4. Écrire une fonction stylerCategorie(cat,color) qui affecte la valeur color à l’arrière-plan
des lignes dont la catégorie est cat
5. Ajouter en html un formulaire qui permet d’ajouter un nouveau produit à la table
tblProduits et dans le DOM.
6. Ajouter un formulaire de filtrage par catégorie (input select). A la sélection d’une
catégorie dans la liste déroulante en affiche la liste des produits de celle-ci dans la table.
7. Écrire une fonction addDeleteButton() qui ajoute devant chaque produit un lien
supprimer qui permet de supprime la ligne produit.(Demander la confirmation de
l’utilisateur avant la suppression)
8. Ajouter un label qui affiche le nombre de produits
9. Ajouter un label qui affiche le nombre de catégories
10. Ajouter des fonctions qui vérifiés les règles de validation suivante, avant l’ajout d’un
produit :
 Id : unique
 Désignation : obligatoire, unique, chaine non vide
 PU : obligatoire, nombre positif
 Qte : obligatoire, nombre positif

M.CHAKOUJ