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 le 26 mars 2008

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

Signaler un abus

Vos réactions

Réagir à cette contribution

Karell
Je préfère utiliser les feuilles de style pour ça !
Signaler un abus
Stephane
C'est clair !
Signaler un abus
Jean Marceau
CSS sert à mettre en forme donc à réaliser cet effet.
L'utilisation d'une image () dénature le document: cette solution n'est pas pérenne
Signaler un abus
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 ; }
Signaler un abus
Seb
A l'heure du Web 2. 0 et des frameworks JavaScript c'est un peu l'astuce de silex !
Signaler un abus