 Ecriture dynamique des Calques, des tableaux HTML

Présentation au sujet: " Ecriture dynamique des Calques, des tableaux HTML"— Transcription de la présentation:

1  Ecriture dynamique des Calques, des tableaux HTML
Le Table Object Model Si la propriété innerHTML permet de lire le contenu HTML situé entre les balises <balise>…</balise>, elle ne permet pas toujours d'écrire un contenu HTML! En l'occurrence, pour les balises <table>…</table> et <tr>…</tr>, la propriété innerHTML ne peut être que lue, et non écrite, en raison de la structure complexe d'un tableau HTML: un tableau contient des lignes, où ces dernières contiennent des cellules. Il n'y a que la cellule du tableau <td>…</td> où la propriété innerHTML peut être lue et écrite. Rappel de la structure HTML d'un tableau : Se documenter sur les balises: (msdn.microsoft.com/library) table thead tbody tfoot caption col colgroup tr td th

2  Ecriture dynamique des Calques, des tableaux HTML
Ecriture dynamique des tableaux Le Table Object Model (à comparer au Document Object Model, plus général qui répertorie tous les objets dans la fenêtre du navigateur) contient des méthodes et des collections, afin de créer et manipuler le contenu d'un tableau HTML. Les collections : Les principales collections sont rows et cells, qui sont des objets Array sous javascript, et contiennent une référence vers chaque ligne du tableau HTML, et chaque cellule d'une ligne du tableau HTML, respectivement. La syntaxe est la suivante: Les méthodes : insertRow() et deleteRow() permettent d'insérer ou de supprimer des lignes, uniquement dans le corps d'un tableau HTML, à savoir dans la balise <tbody> d'un tableau, déjà déclarée dans le code HTML. insertCell() et deleteCell() permettent d'insérer ou de supprimer des cellules dans une ligne de tableau, déclarée dans le code HTML ou créée par la méthode insertRow(). Pour une cellule ainsi créée, la propriété innerHTML permet maintenant d'y écrire du code HTML. Il existe de nombreuses méthode pour manipuler les Tableaux HTML en Javascript, entreprendre pour cela une recherche documentaire

3  Ecriture dynamique des Calques, des tableaux HTML
Exemples Pratiques Ecriture dynamique d'un tableau : Vous disposez de données des employés sous forme d'un objet personnalisé. Par ailleurs, vous avez créé un tableau HTML pour afficher ces données, avec les en-têtes de colonnes Nom, Prénom et Téléphone. Vous devez maintenant remplir dynamiquement le tableau HTML, soit une ligne du tableau HTML par employé. Schéma d'exécution : Code HTML d'un tableau, avec les balises <thead>, <tbody>, <th> et l'attribut id pour <tbody> Ecrire une fonction remplirTab(), qui récupère dans une variable le corps du tableau HTML, puis pour chaque élément de l'Array JS lesEmployés (boucle for), création d'une ligne, de cellules dans la ligne, et écriture de la donnée dans la cellule. Appeler la fonction seulement lorsque le document HTML est téléchargé (événement onload). lesEmployes = new Array(); lesEmployes[0]=new employe("Faerber","Richard"," "); lesEmployes[1]=new employe("Christoffel","Eric"," "); function employe(leNom,lePrenom,leTelephone) { this.nom = leNom; this.prenom = lePrenom; this.telephone = leTelephone; } <table id="laTableID" width="400" cellpadding="0" cellspacing="0" border="1"> <col width="150"><col width="100"><col width="150"> <caption valign="top">Liste des numéros de téléphone</caption> <thead> <tr><th>Nom</th><th>Prénom</th><th>Téléphone</th></tr> </thead> <tbody id="main"></tbody> </table> Données Tabulaires