Ouvrir la navigation secondaire

Ce billet a plus de deux ans. S'il contient des informations techniques elles sont peut être obsolètes.

Précédent J'ai fait un rêve
Suivant GUI Galaxy de retour

Galère de javascript

L'article Zebra Tables tombait à point nommé pour moi. J'avais besoin d'un script pour zébrer certains tableaux plutôt que de le faire à la main en alternant les attributs class sur tous les éléments td. Oui mais voilà, son script est basé sur un getElementById pour cibler le tableau à zébrer. Or j'ai plusieurs tableaux dans ma page et les attributs id doivent être uniques. Damned s'écria la baronne.

Je me suis donc mis en tête de modifier ce script pour qu'il puisse agir sur davantage de tableaux. Seulement je suis pas un king du javascript et je suis bloqué, je trouve pas de solution.

Ma galère : je fais des getElementsByTagName pour récupérer tous les éléments table, tbody, tr et enfin td. Ensuite j'alterne les couleurs de fond de tous les td. Ca fonctionne a peu près mais j'aimerai que chaque première cellule de tableau commence par la même couleur. Pour l'instant, le script ne fait pas la différence entre 2 tableaux, donc si le premier à un nombre impair de cellules, le second ne commencera pas par la même couleur. J'ai un peu de mal à expliquer le problème. Je ne sais pas comment faire alors si quelqu'un a une idée pour me mettre sur la voie ou améliorer le script, ça serait sympa.

Mes fichiers : la page html et le code javascript.

Edit : merci à Mathieu Pillard pour son aide et son script qui fonctionne nickel ! Je vais le mettre bientôt dans la section Tutoriaux du site.

#1

mat

10.04.04 22:01

Tu te compliques la vie pour rien dans ton script :) Notamment, tu peux demarrerl getTrucByMachin d'ou tu veux, pas seulement document, et le DOM contient deja des fonctions pour chopper une table, ses cellules, lignes, etc.

Si je comprends bien ce que tu veux, tu veux appliquer le surlignage a chacun des tableaux de ta page, en recommandant le surlignage a chaque fois ? Si c'est ca, dis le et je te le fais en 5 minutes en en profitant pour corriger ce que tu as deja pour le rendre moins gourmant en ressources en utilisant les fonctions deja pretes du DOM :)

#2

mat

10.04.04 22:16

Je suis http://home.virgule.info/tdcolor.html incorrigible

#3

Marco

10.04.04 22:16

C'est exactement ce que je veux ! Je suis pas une bête en javascript, tu l'a remarqué dans mon script ;) Alors si tu peux améliorer ça c'est cool :) Ca me fera apprendre en même temps !

#4

mat

10.04.04 22:58

Je suis vraiment incorrigible, si vous utilisez safari: 1- plaignez vous a ses developpeurs qui ne gerent pas les trucs du DOM pour acceder aux tables correctement 2- utilisez http://home.virgule.info/tdcolor2.html plutot 3- pensez a faire une version sans les couteux getElementsByTagName du script ci dessus en parsant l'arbre a la main.

#5

Marco

10.04.04 23:09

Merci Mat, c'est de la bombe ! J'essayerai de parser l'arbre à la main quand je saurai ce que ça veut dire ;)

#6

A. L.

10.04.04 23:16

Le premier tdcolor.html marche très bien dans la dernière de Safari, 125.1 (1.2 mis à jour).

#7

Marco

10.04.04 23:27

Oui ça y est la première version fonctionne sous Safari mais Mat y a fait une petite modification !