11521 sujets

JavaScript, DOM et API Web HTML5

Insertion de lignes en JS

Bonjour,

J'ai un projet de développement pour l'un des mes sites web mais je ne sais pas par où commencer. Je vous explique. J'ai une liste qui se présente comme en FIGURE 1

FIGURE 1
+ Ligne 1
+ Ligne 2
+ Ligne 3
+ Ligne x

Je souhaiterais, par exemple, au clic sur le '+' de la ligne 2, l'affichage devient celui-ci :

FIGURE 2
+ Ligne 1
- Ligne 2
sous ligne 2-1
sous ligne 2-2
sous ligne 2-x
+ Ligne 3
+ Ligne x

Le contenu des sous-lignes est dans une base de données mais avec XMLHttpRequest() je pense savoir comment faire ayant déjà manipulé de l'AJAX dans d'autres projets.

Si maintenant je clique sur le '-' de Ligne 2, les deux sous-lignes disparaissent et l'affichage revient à la FIGURE 1

Et dernière étape, si je clique sur le '+' de la Ligne 3 de la FIGURE 2, les deux sous-lignes de la Ligne 2 disparaissent également et cela donne alors l'affichage suivant

FIGURE 3
+ Ligne 1
+ Ligne 2
- Ligne 3
sous ligne 3-1
sous ligne 3-2
sous ligne 3-x
+ Ligne x

Je maîtrise le PHP et MySQL mais je suis une demi-buse en CSS et une triple-buse en Javascript. Y aurait-il de par le vaste monde une âme généreuse qui pourrait me mettre le pied à l'étrier pour réaliser ça ?

Merci à vous.
Bonjour et bienvenue sur le forum,
Peut-être que ces liens peuvent vous aider :
- https://www.alsacreations.com/article/lire/1335-html5-details-summary.html
- https://www.w3schools.com/w3css/w3css_accordions.asp
- https://codepen.io/bazooka07/pen/GdJNba
- https://codepen.io/bazooka07/pen/pVJNgz

Avez-vous des questions ?

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.
Merci. Ça va me faire de la lecture pour un petit moment.

Si d'autres personnes ont des liens à partager, qu'elles n'hésitent pas. Je suis preneur.

Merci à tous.
Zut, mon jsfiddle ne veut pas se lancer !
Re-voici le code autrement pour le tester directement, FalkenZ : https://codepen.io/exercices/pen/gOgqdKm !

Cela va-t-il ?
--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.
Modérateur
js_html a écrit :
Zut, mon jsfiddle ne veut pas se lancer !
Re-voici le code autrement pour le tester directement, FalkenZ : https://codepen.io/exercices/pen/gOgqdKm !


Il n'est pas nécessaire d'utiliser une pseudo class, tu peut redéfinir la puce de summary via list-style 
summary {
   list-style:'+'
}
details[open] summary {
   list-style: "-";
}



L'info est dans le lien fourni par bazooka07
Cdt
Modifié par gcyrillus (26 Apr 2021 - 00:44)
Sujet clos
Aller à