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 dans un tableau en HTML

René Lefebvre , Pierres

Quel est en quelques lignes l'objectif de votre astuce ?

Remplacer la balise <tr> par un appel à du JavaScript qui donne une balise différente à chaque ligne.
Lignes paires : <tr class=blanc >
Lignes impaires <tr class=gris>

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 à fond() : <script language=JavaScript>fond() </script>

Pour avoir un exemple :
http://www.retrieverclubdefrance.com/Portees/lab-port.htm

Publié le 26 mars 2008

Vos réactions

Réagir à cette contribution

Julien Verkest
Avec le :

color:#ffff66">background-color:#ffff66">framework color:#ffff66">background-color:#ffff66">javascript color:#ffff66">background-color:#ffff66">jquery

ça donnerait ceci :

color:#ffff66">background-color:#ffff66">/* ajout de classes color:#ffff66">background-color:#ffff66">css pour les valeurs pair / impair d'un tableau color:#ffff66">background-color:#ffff66">*/
$("table color:#ffff66">background-color:#ffff66">tr: color:#ffff66">background-color:#ffff66">odd"). Addclass("color:#ffff66">background-color:#ffff66">row_odd") ;
$("table color:#ffff66">background-color:#ffff66">tr: color:#ffff66">background-color:#ffff66">even"). Addclass("color:#ffff66">background-color:#ffff66">row_even") ;

color:#ffff66">background-color:#ffff66">/*css color:#ffff66">background-color:#ffff66">*/
. color:#ffff66">background-color:#ffff66">Row_odd { color:#ffff66">background: color:#ffff66">#D9D9D9 ; color: #000 ; }
. Row_even { color:#ffff66">background: #000 ; color: color:#ffff66">#D9D9D9 ; }

Seb
A l'heure du Web 2. 0 et des frameworks JavaScript c'est un peu l'astuce de silex !

Réagir vous aussi

Les dernières contributions

"Nettoyer son code CSS en ligne" Jean-Christophe Delanneau, Boulogne Billancourt

"Blocage du bouton droit dans une page HTML" Shark

"Alterner les couleurs des lignes d'un tableau" René Lefebvre, St Gearmain

"Nettoyer son code HTML grâce au navigateur Firefox" Yves Specht, Aix-En-Provence

"Nettoyer et valider son code HTML" Christofle

En ce moment sur Journal du Net Développeur

L'UE s'oppose au rachat de Sun par Oracle : bonne nouvelle pour mySQL ? Participez | 1 contribution

Comment abordez-vous le défi de la sécurité des applications ? Participez | 2 contributions

Vous avez recours à l'infrastructure Spring Participez