11543 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai un tableau de 5 colonnes et comptant plusieurs centaines de lignes. Les lignes du tableau sont triées en fonction des valeurs des deux premières colonnes (le tri est fait dans le sql), comme ci-dessous:
________________________________
titre1 | titre2 | titre3 | titre4 | titre5 |
________________________________
a1 | b1 | c1 | d1 | e1 |
________________________________
a1 | b1 | c2 | d2 | e2 |
________________________________
a1 | b2 | c3 | d3 | e3 |
________________________________
a1 | b2 | c4 | d4 | e4 |
________________________________
a2 | b3 | c5 | d5 | e5 |
________________________________
a2 | b4 | c6 | d6 | e6 |
________________________________

Je veux réaliser un système d'arbre pour l'affichage de mon tableau car le nombre de lignes important rend la navigation difficile. C'est à dire pouvoir plier/deplier mon tableau, en fonction de la valeur des deux premières colonnes. Par exemple, je veux pouvoir n'afficher que les lignes ou titre 1 = a1 mais aussi de pouvoir filtrer les lignes en fonction de titre2.
________________________________
titre1 | titre2 | titre3 | titre4 | titre5 |
________________________________
a1 | b1 | c1 | d1 | e1 |
________________________________
a1 | b1 | c2 | d2 | e2 |
________________________________
a1 | b2 | | | |
________________________________
a2 | | | | |
________________________________

Je suis partis sur du Javascript, afin de jouer sur la visibilité des <tr> de la <table>, mais je ne sais pas si c'est la bonne solution. Si qqn a déjà réaliser ce genre de tableau ou a une piste à me proposer, ça serait cool.

Merci.
Non, ça me semble une bonne solution.

Y a quand même un petit piège. Sous IE, pour faire apparaitre un tr, faut utiliser display:block et non display:table-row-group.

Tu peut également rajouter des class (à la création du HTML) aux tr à grouper. Comme ça, un simple recherche sur les class te permettra de masquer/afficher toute la bordée de tr.
Modifié par MacIntoc (12 Nov 2008 - 12:22)
ok , merci.

J'ai réussi à faire ce que je voulais, avec des fonctions javascript pour modifier la visibilité des <tr> en fonction de leur id, et/ou de leur classe. Le seul problème c'est lorsque je veux réaliser le même style d'arborescence sur un autres tableau, car la solution n'est pas très portable (obliger de créer les name et id sur les <tr> ainsi que les lien vers les javascript). Si je trouve une solution plus simple, je dis quoi.

Merci.