Parcourir un tableau HTML avec JavaScript : Si

Université Abou Bakr-Belkaïd – Tlemcen
Faculté des Sciences
Département d’Informatique
Année universitaire 2014-2015
2 année Licence Informatique
Développement d’applications Web
ème
TP 6
Parcourir un tableau HTML avec JavaScript : Si table est une variable qui présente un tableau HTML
(variable créée par la méthode getElementById('id_table')), alors la méthode table.rows() permet de
retourner un tableau qui contient toutes les lignes de table. La première ligne est donnée par
table.rows()[0], la deuxième par table.rows()[1] et ainsi de suite. La première cellule de la première
ligne est donnée par table.rows()[0].firstElementChild, la deuxième cellule de la première ligne est
donnée par table.rows()[0].firstElementChild.nextElementSibling, la troisième cellule de la quatrième
ligne est donnée ainsi par table.rows()[3].firstElementChild.nextElementSibling.nextElementSibling.
Exercice n° 01 : Créez le fichier TP6.HTML et lisez attentivement la fonction parcourir(id_table) pour
mieux comprendre comment parcourir un tableau HTML et récupérer ses lignes et ses cellules.
Implémentez les fonctions suivantes :
1. deplacer_vers_table2(){…} : Parcourir le premier tableau et à chaque fois qu’une ligne avec un solde
négatif est rencontrée, ajoutez cette ligne au deuxième tableau puis la supprimez du premier tableau.
2. deplacer_vers_table1(){…} : Le même principe que la fonction précédente.
3. compte_existe(nom, prenom, id_table){…} : Permet de tester si une ligne avec les valeurs nom et
prenom existe déjà dans le tableau identifié par id_table.
4. Utilisez la fonction précédente pour implémenter la fonction ajouter(): la saisie du nom et du prénom
doit se répéter tant qu’il y a un compte avec ces deux valeurs. Un solde négatif au niveau du Table1
doit être affiché en rouge, la même chose pour un solde positif au niveau du Table2. L’identifiant du
tableau à modifier peut être déterminé à travers la liste de choix comme suit :
var choix_table = document.getElementById("choix_1");
var id_table = choix_table.options[choix_table.selectedIndex].textContent;
5. supprimer(){…} : Déterminez la valeur minimale et la valeur maximale du solde, le tableau à
modifier, puis supprimer toutes les lignes ayant un solde entre ces deux valeurs.
Exercice n° 02 (Facultatif): Pour un tableau donné, pensez aux opérations suivantes :






Supprimer la ième ligne.
Insérer une ligne à l’indice i (les méthodes insertBefore() et appendChild() pourront être
utilisées).
Remplacer la ième ligne par une nouvelle ligne.
Déplacer la ième ligne vers la fin.
Permutation entre deux lignes i et j.
Cas d’un tableau trié selon le solde: insertion à la bonne position.
hmahfoud.wordpress.com
Page 1/1