OVH Cloud OVH Cloud

[DOM] Formatter un tableau

2 réponses
Avatar
edo999
Bonjour,

J'aimerais formater un tableau tout pr=EAt que je ne peux pas toucher.
Id=E9alement, j'aimerais alterner les couleurs des lignes pour
am=E9liorer la lisibilit=E9 (=3D affecter un style =E0 une ligne sur deux).
J'ai besoin de DOM pour faire cela, mais je ne suis pas vraiment
familier et ne suis pas s=FBr de la fa=E7on de m'y prendre.

Il n'y a qu'un tableau dans ma page. Je peux l'appeler avec
document.getElementsByTagName(). Ensuite, j'appelle le premier noeud
enfant (<TR>) pour lui appliquer un style (disons couleur fonc=E9e).
Ensuite, il faut que je trouve le noeud suivant <TR> (sibling ?), mais
ne pas lui appliquer de style (il reste blanc). Puis je dois
recommencer cette boucle jusqu'=E0 la fin du tableau.

Est-ce que cela vous semble correct ? Avez-vous d'autres id=E9es ou
conseils ?

2 réponses

Avatar
ASM
Bonjour,

J'aimerais formater un tableau tout prêt que je ne peux pas toucher.
Idéalement, j'aimerais alterner les couleurs des lignes pour
améliorer la lisibilité (= affecter un style à une ligne sur deux).
J'ai besoin de DOM pour faire cela, mais je ne suis pas vraiment
familier et ne suis pas sûr de la façon de m'y prendre.


http://stephane.moriaux.perso.orange.fr/truc/tables_un-sur-deux_rows_fr.htm

http://stephane.moriaux.perso.orange.fr/truc/tables_highlight_cells_fr
http://stephane.moriaux.perso.orange.fr/truc/tables_highlight_rows_fr.htm
http://stephane.moriaux.perso.orange.fr/truc/essai_liste_par_table_xls.htm
http://stephane.moriaux.perso.orange.fr/truc/tablescript-sm.html

Il n'y a qu'un tableau dans ma page. Je peux l'appeler avec
document.getElementsByTagName().


tu styles tous tes TRs en CSS et aussi une class

tr { background: #ddd; }
.tr2 { background: #ccc; }

tu récupères le tableau de tes TRs :

var T = document.getElementsByTagName('TR');


Ensuite, j'appelle le premier noeud
enfant (<TR>) pour lui appliquer un style (disons couleur foncée).
Ensuite, il faut que je trouve le noeud suivant <TR> (sibling ?),


ben ... non, tu fais une boucle avec un incrément par pas de 2

for(var i=0; i<T.length; i += 2)
if(T[i]) T[i].className = 'tr2';

Est-ce que cela vous semble correct ? Avez-vous d'autres idées ou
conseils ?


Pas plus :-)



--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Contact : http://stephane.moriaux.perso.wanadoo.fr/contact
ASM = Aimable Stéphane Moriaux = Amateur Sasseur Merdouilles

Avatar
edo999
Formidable !
Merci beaucoup pour cette réponse, j'ai pu faire exactement ce que je
voulais.
Merci encore !