JavaScript


Tableau HTML interactif avec JavaScript

Comment manipuler une page HTML/CSS en JavaScript.

Montre comment manipuler un tableau HTML en JavaScript.

Dans un article précédent, nous avions vu comment réaliser un tableau en HTML   et à le rendre présentable grace au langage CSS  . Pour aller un peu plus loin, voyons comment le rendre interactif en utilisant du JavaScript.


 Présentation

Le but de cet article va être de montrer comment générer du code HTML   en JavaScript puis de gérer l’interactivité de la page avec l’utilisateur.

L’exemple que nous prendrons est celui d’une page HTML   composée d’un tableau définissant une liste d’activités dans lequel un utilisateur pourra cocher des choix. En fonction de ces choix, une cellule en bas de tableau devra afficher le total de la cotisation correspondante en temps réel.

Nous prendrons comme modèle le tableau défini dans l’article : Des tableaux en HTML/CSS.

Cet exemple va nous permettre de d’aborder, entre autre, les sujets suivant en JavaScript :

  • Comment définir et manipuler des variables simples.
  • Comment définir et utiliser des fonctions.
  • Comment utiliser des objets.
  • Comment agir sur le code HTML et CSS  .
  • Comment relier l’exécution de code JavaScript à un événement.

 Organisation du projet

Si vous avez repris le code du tableau défini dans l’article spécifié, vous devriez vous retrouver avec un fichier .html définissant la page à afficher et un second fichier .css   contenant la feuille de style.

Vous allez ajouter un nouveau fichier dans le même répertoire portant le même nom mais avec l’extension .js. Ce dernier contiendra le code JavaScript.

Dans l’exemple suivant, je prendrais comme nom de fichier les noms suivant :

tuto-table-form.html
tuto-table-form.css
tuto-table-form.js
Remarque : Vos fichiers pourrons avoir les noms que vous voudrez, seul l’extension est à respecter.

La première modification à réaliser, est d’ajouter un lien dans votre fichier .html pour spécifier le fichier .js que vous venez de créer.

Fin du fichier :

  1. ...
  2.     </tfoot>
  3.   </table>
  4. </body>
  5. <script src="tuto-table-form.js"></script>
  6. </html>

Télécharger

Remarque : On conseille généralement de mettre le lien avec les fichiers JavaScript en fin de fichier HTML voir ici.

 Création dynamique des cellules de données

Si vous reprenez le contenu du fichier HTML de l’exemple précédent, nous voyons que le tableau a été définit totalement en HTML. Il pourrait être intéressant à ce que le corps du tableau, les lignes se trouvant entre les balises tbody, soient créées dynamiquement par du code JavaScript. Cela permettrait de simplifier la mise à jour si l’on veut ajouter, supprimer ou modifier les cotisations des activités.

Nous allons d’abord supprimer ces lignes dans le fichier .html. Le code du tableau devrait correspondre à ceci :

  1. <table class="table-facture">
  2.     <caption>Année 2018 - 2019</caption>
  3.     <thead>
  4.       <tr>
  5.         <th>Activité</th>
  6.         <th>Cotisation</th>
  7.         <th>Inscrit</th>
  8.         <th>Prix</th>
  9.       </tr>
  10.     </thead>
  11.     <tbody>
  12.      
  13.     </tbody>
  14.     <tfoot>
  15.       <tr>
  16.         <th class="lib-total" colspan="3">Total</th>
  17.         <th class="fld-num">0 €</th>
  18.       </tr>
  19.     </tfoot>
  20.   </table>Remarque

Télécharger

Mettez également 0 dans la cellule qui servira à afficher le total même si ce n’est pas très important puisque cette donnée sera calculée par la suite.

Nous allons commencer à créer du code dans notre fichier .js.

Définition d’un tableau en JavaScript

La première chose que l’on va réaliser est de créer un tableau d’objets définissant chaque activité. Cela va donner le code suivant :

  1. // Liste des activités
  2. //===============
  3. const activites = [
  4.   { titre: "Patchwork",  prix: 25 }, // 0
  5.   { titre: "Peinture",  prix: 35 }, // 1
  6.   { titre: "Encadrement",  prix: 22 }, // 2
  7.   { titre: "Gymnastique",   prix: 17 }, // 3
  8.   { titre: "Photographie",  prix: 45 }, // 4
  9.   { titre: "Emaux",  prix: 30 }, // 5
  10.   { titre: "Création textile",  prix: 30 }, // 6
  11.   { titre: "Roller",  prix: 58 }, // 7
  12.   { titre: "Généalogie",  prix: 15 }, // 8
  13.   { titre: "Scrapbooking",  prix: 20 }, // 9
  14.   { titre: "Frais d'adhésions", prix: 35 }  // 10
  15. ];

Télécharger

Remarque : JavaScript propose maintenant 2 mots clés const et let pour déclarer une variable en plus de var. Voir ici pour let et ici pour const.
Remarque : le mot clé const sert à déclarer des constantes mais dans le cas d’objets et de tableaux, on peut généralement l’utiliser même si leurs contenus évoluent puisqu’il s’agit de références.

Pour accéder à un élément particulier d’un tableau, il suffira d’utiliser la syntaxe suivante (exemple le prix de la première activité) :

  1. activite[ 0 ].prix;

Création des lignes d’un tableau HTML en JavaScript

Comme nous allons avoir besoin de faire référence dans notre code JavaScript à notre composant table HTML, le plus simple est de lui ajouter un identifiant.

Ce qui donne, dans le fichier .html

  1. <table class="table-facture" id="table-facture">

Pour pouvoir ajouter nos lignes au tableau HTML, il va falloir pouvoir accéder à l’objet table en JavaScript. Pour cela, on va utiliser la méthode suivante :

document.querySelector( '#table-cotisation' )

Puis récupérer sa balise tbody de cette table avec la méthode :

querySelector( 'tbody')

Puis, pour chaque ligne du tableau mémoire, il faudra ajouter une ligne dans le tableau HTML. Pour cela nous utiliserons la méthode :

insertRow()

et pour chaque cellule, la méthode :

insertCell()

Une fois la cellule créée, il suffira d’ajouter le code HTML avec la propriété :

innerHTML

Nous avons tous les éléments pour construire la fonction d’initialisation des lignes du tableau.

Définissons l’entête de la fonction :

  1. function initTableau() {
  2.  
  3. }

Télécharger

Pour pouvoir tester au fur et à mesure le code que nous ajouterons, il faut que la fonction s’exécute lors de l’affichage de la page. Il suffit d’ajouter le nom de la fonction dans le fichier .js après la définition du tableau pour lancer son exécution :

  1. initTableau();

Pour l’instant, si nous affichons notre page, cela devrait donner l’écran suivant :

Commençons à saisir le code de la fonction :

  1. function initTableau() {
  2.  
  3.   const tbody = document.querySelector( '#table-facture' ).querySelector( 'tbody');
  4.  
  5.   for ( let i = 0; i < activites.length; i++ )
  6.   {
  7.     const ligne = tbody.insertRow();
  8.  
  9.     // cellules activités
  10.     let cellActivite = ligne.insertCell();
  11.     cellActivite.innerHTML = activites[ i ].titre;
  12.  
  13.     // cellules cotisations
  14.     let cellCotisation = ligne.insertCell();
  15.     cellCotisation.innerHTML = activites[ i ].prix;
  16.  
  17.     // cellules choix
  18.     let cellChoix = ligne.insertCell();
  19.  
  20.     // cellules tarifs
  21.     cellTarif = ligne.insertCell();
  22.     cellTarif.innerHTML = 0;
  23.   }
  24. }

Télécharger

Remarque : Lors de vos premiers essais, vous ferais peut-être des erreurs. N’hésitez pas à afficher les outils de développement de votre navigateur, notamment la fenêtre Console, pour afficher les messages d’erreurs.

L’affichage devrait donner cela :

 Affichage des cases à cocher dans le tableau

Comme nous désirons que l’utilisateur puisse sélectionner lui-même les activités auquelles il désire s’inscrire, nous ajouter des cases à cocher dans la colonne inscrit. Modifions le code de définition de cette colonne :

  1. // cellules choix
  2.     let cellChoix = ligne.insertCell();
  3.     if ( i === activites.length -1 )
  4.     {
  5.       // dernière ligne, les frais sont obligatoires (frais d'adhésions)
  6.       cellChoix.innerHTML = '<input type="checkbox" disabled checked />';
  7.     }
  8.     else
  9.     {
  10.       cellChoix.innerHTML = '<input type="checkbox" />';
  11.     }

Télécharger

Vous remarquerez que le programme réalise un traitement différent pour la dernière ligne car les frais d’adhésions sont obligatoires. La case checkbox est cochée par défaut et désactivée pour qu’elle ne soit pas modifiable.

On obtient le tableau suivant :

 Calcul automatique de la cotisation

Avant de définir notre fonction, nous allons ajouter un identifiant à la cellule total dans le fichier .html puisque le code JavaScript devra y accéder.

  1. <th class="fld-num" id="total">0 €</th>

Nous allons maintenant ajouter une nouvelle fonction dans le fichier .js.

  1. function calculCotisation()
  2. {
  3.  
  4. }

Télécharger

Nous allons également ajouter son nom à la suite de l’appel de la fonction précédente pour qu’elle soit également exécutée à chaque chargement de page.

  1. initTableau();
  2. calculCotisation();

Télécharger

Nous allons maintenant ajouter le code qui va afficher le coût de la cotisation dans la colonne de droite en fonction du statut de la case à cocher.

En plus des méthodes et propriétés utilisées dans la précédente fonctions, nous utiliseront également celle ci :

querySelectorAll();

comme querySelector() mais renvoi une liste d’éléments au lieu d’un seul.

childNodes

qui nous permettra de récupérer un tableau correspondant aux objets contenus dans les cellules du tableau.Dans notre cas, ce tableau contiendra un élément qui sera la checkbox, ce qui nous permettra de vérifier si cette dernière est cochée.

Comme pour la fonction précédente, nous réalisons une boucle sur chaque ligne du tableau mémoire et faisons une correspondance avec chaque balise tr c’est à dire chaque ligne du tableau HTML. Nous n’oublierons pas d’ajouter la valeur de chaque ligne dans une variable pour afficher le total en fin de traitement.

Cela donne le code suivant :

  1. function calculCotisation()
  2. {
  3.   const tabTr = document.querySelector( '#table-facture' ).querySelector( 'tbody' ).querySelectorAll( 'tr' );
  4.   let total = 0;
  5.  
  6.   for ( let i = 0; i < activites.length; i++ )
  7.   {
  8.     if ( tabTr[ i ]. cells[ 2 ].childNodes[ 0 ].checked )
  9.     {
  10.       tabTr[ i ].cells[ 3 ].innerHTML = activites[ i ].prix;
  11.       total += activites[ i ].prix;
  12.     }
  13.     else
  14.     {
  15.       tabTr[ i ].cells[ 3 ].innerHTML = 0;
  16.     }
  17.   }
  18.   document.querySelector( '#total' ).innerHTML = total;
  19. }

Télécharger

Ce qui donne :

Il semble que la colonne Prix ainsi que le total soient à jour mais la page n’est toujours pa interactive car si l’on coche une nouvelle activité, rien ne se passe car le calcul n’est pas relancé lors des modifications de l’utilisateur.

 Exécution d’une d’une fonction suite à un événement

Pour que l’affichage soit à jour, il faudrait que la fonction de calcul soit exécutée dès que l’utilisateur agit sur le formulaire. Il se trouve que JavaScript nous permet de rattacher l’exécution d’une fonction à un événement. Cela peut être un click sur un bouton par exemple ou tout autre événement.

Dans notre cas cela va être très simple. Il nous suffit dans le fichier .html d’ajouter une balise form qui va englober notre table et de lui définir une propriété oninput égale au nom de la fonction à exécuter dès qu’une entrée de l’utilisateur sera détectée. Voici les modifications :

  1.   <form oninput="calculCotisation();">
  2.     <table class="table-facture" id="table-facture">
  3.       <caption>Année 2018 - 2019</caption>
  4.       <thead>
  5.         <tr>
  6.           <th>Activité</th>
  7.           <th>Cotisation</th>
  8.           <th>Inscrit</th>
  9.           <th>Prix</th>
  10.         </tr>
  11.       </thead>
  12.       <tbody>
  13.  
  14.       </tbody>
  15.       <tfoot>
  16.         <tr>
  17.           <th class="lib-total" colspan="3">Total</th>
  18.           <th class="fld-num" id="total">0 €</th>
  19.         </tr>
  20.       </tfoot>
  21.     </table>
  22.   </form>

Télécharger

Et vérifions le résultat :

Il nous reste plus qu’à fignoler la présentation en formatant les valeurs monétaires et en rajoutant les noms de classes de styles aux lignes de la table générées en JavaScript.

 Formater des nombres en JavaScript

La librairie JavaScript fournit la méthode de classe NumberFormat() qui va nous permettre de créer un objet de formatage. Nous allons donc ajouter dans le fichier .js juste après la définition du tableau, la ligne suivante :

  1. const euro = new Intl.NumberFormat( 'de-DE', { style: 'currency', currency: 'EUR' } );

Il suffit d’utiliser l’objet euro que nous venons de créer à chaque fois que nous aurons besoin de renvoyer une valeur monétaire dans les 2 fonctions JavaScript que nous avons écrit.

Exemple d’une ligne modifiée :

  1. cellCotisation.innerHTML = euro.format( activites[ i ].prix );

 Définir des classe CSS en JavaScript

Pour retrouver la présentation que nous avions dans notre tableau d’origine en pur HTML, nous allons devoir ajouter les noms de classes aux cellules créées par les fonctions JavaScript.

Pour cela, nous allons utiliser une propriété nommée className. Voici le code de la fonction d’initialisation du tableau modifiée :

  1. function initTableau() {
  2.  
  3.   const tbody = document.querySelector( '#table-facture' ).querySelector( 'tbody');
  4.  
  5.   for ( let i = 0; i < activites.length; i++ )
  6.   {
  7.     const ligne = tbody.insertRow();
  8.  
  9.     // cellules activités
  10.     let cellActivite = ligne.insertCell();
  11.     cellActivite.innerHTML = activites[ i ].titre;
  12.     cellActivite.className = 'lib-acti';
  13.  
  14.     // cellules cotisations
  15.     let cellCotisation = ligne.insertCell();
  16.     cellCotisation.innerHTML = euro.format( activites[ i ].prix );
  17.     cellCotisation.className = 'fld-num';
  18.  
  19.     // cellules choix
  20.     let cellChoix = ligne.insertCell();
  21.     cellChoix.className = 'fld-log';
  22.  
  23.     if ( i === activites.length -1 )
  24.     {
  25.       // dernière ligne, les frais sont obligatoires (frais d'adhésions)
  26.       cellChoix.innerHTML = '<input type="checkbox" disabled checked />';
  27.     }
  28.     else
  29.     {
  30.       cellChoix.innerHTML = '<input type="checkbox" />';
  31.     }
  32.  
  33.     // cellules prix
  34.     cellTarif = ligne.insertCell();
  35.     cellTarif.innerHTML = euro.format( 0 );
  36.     cellTarif.className = 'fld-num';
  37.   }
  38. }

Télécharger

Ce qui donne :

 Conclusion

A travers un petit exemple, nous avons pu voir comment utiliser les 3 langages à connaître que sont le HTML, le CSS et le JavaScript pour du développement WEB coté client c’est à dire, exécuté par votre navigateur (IE,FireFox, Safari, Chrome...)


Article n° 133

Crée par: chris

Créé le: 11 juin

Modifié le: 22 juillet

Nombre de visites: 35

Popularité: 19 %

Popularité absolue: 2

Mots clés de cet article


SPIP

2003-2019 LePpf
Plan du site | | Contact | RSS 2.0

Visiteurs connectés : 2

Nombre moyen de visites quotidiennes sur le site: 158