Pratique sur la modification d'éléments en JavaScript
Un tableau est donné. Affichez ses éléments sous forme de
liste ul.
Modifiez le problème précédent pour que
en cliquant sur n'importe quel li, un
champ de saisie apparaisse, permettant de
la modifier.
Modifiez le problème précédent pour qu'un
champ de saisie se trouve sous la liste,
permettant d'ajouter un nouvel élément à la fin
de la liste ul. Faites en sorte que les nouveaux
li puissent également être modifiés.
Modifiez le problème précédent pour que
à la fin de chaque li se trouve un lien 'supprimer',
permettant de supprimer cet élément
li de la liste ul.
Modifiez le problème précédent pour que
à la fin de chaque li se trouve également un lien
'barrer', permettant
de barrer le texte de cette balise
li.
Tableau d'objets et table
Le tableau suivant avec des employés est donné :
javascriptlet employees = [
{name: 'employee1', age: 30, salary: 400},
{name: 'employee2', age: 31, salary: 500},
{name: 'employee3', age: 32, salary: 600},
];
Affichez ces employés dans un tableau HTML.
Ajoutez la possibilité de modifier les cellules du tableau créé.
Ajoutez une nouvelle colonne à votre tableau avec un lien pour supprimer une ligne du tableau.
Placez sous le tableau 3 champs de saisie et un bouton
pour ajouter un nouvel employé. Laissez les
champs de saisie pour le nom, l'âge et le salaire,
et lors d'un clic sur le bouton, le nouvel employé est ajouté
dans le tableau. Implémentez la modification des cellules
pour les employés nouvellement ajoutés.
Tableau d'objets et liste
Le tableau suivant avec des employés est donné :
javascriptlet employees = [
{name: 'employee1', age: 30, salary: 400},
{name: 'employee2', age: 31, salary: 500},
{name: 'employee3', age: 32, salary: 600},
];
Affichez chaque employé à l'écran dans sa propre
balise li de la balise ul.
Faites en sorte qu'en cliquant sur le nom, l'âge ou le salaire d'un employé, un champ de saisie apparaisse pour modifier ce champ.
Ajoutez à la fin de chaque balise li un lien
pour supprimer cet élément li de la liste.
Placez sous la liste un formulaire pour ajouter un nouvel employé.