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.

Sommaire

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 :

...
</tfoot>
</table>
</body>
<script src="tuto-table-form.js"></script>
</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 :

<table class="table-facture">
<caption>Année 2018 - 2019</caption>
<thead>
<tr>
<th>Activité</th>
<th>Cotisation</th>
<th>Inscrit</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th class="lib-total" colspan="3">Total</th>
<th class="fld-num">0 €</th>
</tr>
</tfoot>
</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 :

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

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é) :

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

<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 :

function initTableau() {
}

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 :

initTableau();

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

Commençons à saisir le code de la fonction :

function initTableau() {
const tbody = document.querySelector( '#table-facture' ).querySelector( 'tbody');
for ( let i = 0; i < activites.length; i++ )
{
const ligne = tbody.insertRow();
// cellules activités
let cellActivite = ligne.insertCell();
cellActivite.innerHTML = activites[ i ].titre;
// cellules cotisations
let cellCotisation = ligne.insertCell();
cellCotisation.innerHTML = activites[ i ].prix;
// cellules choix
let cellChoix = ligne.insertCell();
// cellules tarifs
cellTarif = ligne.insertCell();
cellTarif.innerHTML = 0;
}
}

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 :

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

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.

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

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

function calculCotisation()
{
}

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.

initTableau();
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 :

function calculCotisation()
{
const tabTr = document.querySelector( '#table-facture' ).querySelector( 'tbody' ).querySelectorAll( 'tr' );
let total = 0;
for ( let i = 0; i < activites.length; i++ )
{
if ( tabTr[ i ]. cells[ 2 ].childNodes[ 0 ].checked )
{
tabTr[ i ].cells[ 3 ].innerHTML = activites[ i ].prix;
total += activites[ i ].prix;
}
else
{
tabTr[ i ].cells[ 3 ].innerHTML = 0;
}
}
document.querySelector( '#total' ).innerHTML = total;
}

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 :

<form oninput="calculCotisation();">
<table class="table-facture" id="table-facture">
<caption>Année 2018 - 2019</caption>
<thead>
<tr>
<th>Activité</th>
<th>Cotisation</th>
<th>Inscrit</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th class="lib-total" colspan="3">Total</th>
<th class="fld-num" id="total">0 €</th>
</tr>
</tfoot>
</table>
</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 :

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 :

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 :

function initTableau() {
const tbody = document.querySelector( '#table-facture' ).querySelector( 'tbody');
for ( let i = 0; i < activites.length; i++ )
{
const ligne = tbody.insertRow();
// cellules activités
let cellActivite = ligne.insertCell();
cellActivite.innerHTML = activites[ i ].titre;
cellActivite.className = 'lib-acti';
// cellules cotisations
let cellCotisation = ligne.insertCell();
cellCotisation.innerHTML = euro.format( activites[ i ].prix );
cellCotisation.className = 'fld-num';
// cellules choix
let cellChoix = ligne.insertCell();
cellChoix.className = 'fld-log';
if ( i === activites.length -1 )
{
// dernière ligne, les frais sont obligatoires (frais d'adhésions)
cellChoix.innerHTML = '<input type="checkbox" disabled checked />';
}
else
{
cellChoix.innerHTML = '<input type="checkbox" />';
}
// cellules prix
cellTarif = ligne.insertCell();
cellTarif.innerHTML = euro.format( 0 );
cellTarif.className = 'fld-num';
}
}

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...)

Développement

Article n° 133

Crée par: chris

Créé le: 11 juin 2019

Modifié le: 22 juillet 2019

Nombre de visites: 3700

Popularité: 33 %

Popularité absolue: 3

JavaScript

Tableau HTML interactif avec JavaScript

Comment manipuler une page HTML/CSS en JavaScript.

Présentation

Organisation du projet

Création dynamique des cellules de données

Affichage des cases à cocher dans le tableau

Calcul automatique de la cotisation

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

Formater des nombres en JavaScript

Définir des classe CSS en JavaScript

Conclusion

Développement

Article n° 133

Mots clés de cet article