Créer des éléments avec le DOM

Objectif

L'objectif de l'exercice est de transformer des données sur les heures de travail d'employés pour les présenter dans un tableau récapitulatif de la semaine. Le résultat final donnera un affichage similaire à celui de la figure 1.

Structure HTML d'un tableau

Pour rappel, l'élément HTML <table> représente un tableau. On utilisera l'élément <thead> pour l'en-tête du tableau (la première ligne), <tbody> pour chaque jour de la semaine et <tfoot> pour les totaux.
L'élément <tr> représente une ligne de tableau (incluse dans un des thead tbody ou tfoot).
L'élément <th> représente une cellule d'en-tête (en gras par défaut) et l'élément <td> représente une cellule.
La page web donnée pour l'exercice contient les styles CSS pour obtenir le résultat demandé.

Documentation MDN sur les tableaux HTML

Données

Récupérer cette archive qui contient une page web et deux fichiers Javascript : un fichier de données (data.js) et un fichier pour votre code (table.js).

Le fichier data.js contient la variable data qui est une liste d'objets. Chaque objet contient les clés suivantes :

• nom : une chaîne de caractères
• prenom : une chaîne de caractères
• semaine : un objet avec pour clés les 7 jours de la semaine, et pour chaque jour un objet avec la clé heures (une liste avec l'heure de début et de fin de la journée de travail) et la clé prevision (le nombre d'heures de travail prévues pour cette journée).
  Si la personne n'a pas travaillé le tableau des heures est vide []

Pour simplifier on ne considère que des heures pleines (pas de minutes), donc on modélise les horaires de début et fin par des entiers.

Attention : vous ne devez pas modifier le code HTML, toute la page va être complétée par l'exécution du Javascript

Le fichier table.js contient une fonction afficher(infos) qui est vide. Pour commencer, on affichera uniquement les données de la première personne de la liste data. La fonction afficher est donc appelée avec uniquement data[0] en argument. Cet appel est fait dans la page web dans le script en fin du body HTML, ce qui permet de s'assurer que l'arbre DOM a bien été construit au préalable par le navigateur.

Préliminaire : créer des cellules de tableau HTLML

Le code va devoir créer de nombreuses cellules de tableau (éléments <th> ou <td>) contenant simplement du texte. On va éviter de répéter ce code de multiples fois.

Les deux fonctions createTh(text) et createTd(text) qui serviront à créer des cellules sont fournies dans l'archive. Ces 2 fonctions appellent createCell :

Écrire la fonction createCell qui crée une cellule de tableau, y insère du texte et renvoie le nœud élément créé. La fonction prend en argument le texte à inclure dans une cellule et le type d'élément à créer (th ou td) : createCell(text, type)
Attention, écrire cette fonction en-dehors de la fonction afficher

Création du tableau pour une personne

Les éléments ajoutés à la page seront mis dans la division d'identifiant conteneur.

1. Écrire dans la fonction afficher le code Javascript qui ajoute le titre h2 avec le prénom et nom de la personne et qui ajoute l'élément table
2. Compléter la fonction afficher pour ajouter l'élément thead qui contient la rangée d'éléments comme sur la figure 2.

   

3. Écrire ensuite dans la fonction afficher le code Javascript qui crée l'élément tbody et les lignes du tableau qui contiennent les résultats.
   Vous devez alors obtenir comme sur la figure 3.
   Remarque : on a besoin de faire la même chose pour chaque jour de la semaine. Pour éviter d'écrire 7 fois le même code, on pourra utiliser for (let jour in infos.semaine) { ... } qui permet d'itérer sur les clés (lundi, mardi, etc) de l'objet infos.semaine.
   Cette syntaxe fonctionne sur les objets Javascript comme pour les dictionnaires en Python, on itère donc sur les clés. Rappel : attention le for ... in ne marche pas comme en Python pour les tableaux. (documentation de for ... in en Javascript)

   

4. Compléter le code pour que les cellules de la colonne -/+ appartiennent à la classe more ou less selon que la personne a fait plus d'heures que prévu ou non. On obtient alors le résultat final de la figure 4.

   

5. Compléter le code pour ajouter l'élément tfoot et les informations de total des heures.
   On obtient alors comme sur la figure 5.
   Remarque : utiliser l'attribut colspan pour qu'une cellule s'étende sur plusieurs colonnes.

   

Création du tableau pour toutes les personnes

Créer la fonction afficherTous(infos) qui va afficher toutes les infos de la liste data.
Nota : il suffit de faire une boucle qui appelle la fonction afficher pour chaque élément.

Commenter la ligne 45 du fichier HTML afficher(data[0]); pour ne pas afficher 2 fois la 1^ère personne.

On obtient alors le résultat ci-dessous.