Journal du Net > Développeurs > Contributions > Soumettez votre meilleure astuce HTML

APPEL
A CONTRIBUTION

Vous manipulez le langage HTML au quotidien. Vous avez certainement une astuce à partager !
Participez
 Alterner les couleurs des lignes d'un tableau  
René Lefebvre , St Gearmain

Quel est en quelques lignes l'objectif de votre astuce ?
Au sein d'un tableau HTML, je veux des lignes colorées alternativement d'une façon automatique.

Décrivez votre astuce en détail. N'hésitez-pas à inclure des portions de codes.
Le code javascript:
<script language=JavaScript>
var cl=0;
function fond() {
if (cl>3) cl=0;
cl++;
if (cl<3){ document. Write("<tr class=blanc>");}
else { document. Write("<tr class=gris>");}
}
</script>

les deux classes "gris" et "blanc" diffèrent juste par la couleur de fond .
Cl>3 change le fond deux lignes par deux lignes

dans la partie HTML,il faut remplacer la balise <tr>par un appel a fond():

<script language=JavaScript>fond() </script>


Publié le 26 mars 2008

Olivier Billard
Merci pour votre participation, René.
Je préfère cependant la méthode [1], pour les raisons suivantes :
- pas d'insertion de script dans le balisage initial, ce qui est plus dirigé vers une séparation claire du style et du contenu,
- il cumule les classes de zébrures avec les classes existantes, plutôt que de les remplacer. On peut donc jouer sur les autres classes pour des mises en formes plus complexes (fond rouge pour des données importantes, quelque soit la zébrure, par exemple),
- il vaut mieux préférer le modulo [2], pour alterner les valeurs, ou mieux, comme dans l'exemple [1], la négation booléenne, le code est plus compréhensible,
- plus accessoire, la notion de ligne paire et impaire me plaît plus que la notion de couleur exposée directement dans le nom de classe : c'est plus sémantique, il faut éviter les classes comme blanc, gris ou titreBleuSoulignéEnVert, qui laisse peu de choix de mise en forme après coup (changement d'avis du client pour un fond rose ? ).

[1] http://validweb.Nl/artikelen/javascript/better-zebra-tables/
[2] http://developer.Mozilla.Org/en/docs/Core_JavaScript_1.5_Reference:Operators:Arithmetic_Operators#.25_. 28Modulus.29
11 contributions : 1 2 3 4 5 6 7 8 9 10 11
 




 

© Benchmark Group, 69-71 avenue Pierre Grenier 92517 BOULOGNE BILLANCOURT Cedex

RECHERCHER