Articles Taggés ‘Tableau’

Pour faciliter la lecture d’un tableau il est fréquent d’alterner la couleur de chaque ligne.
Le principe est d’attribuer aux lignes paires un style et un autre aux lignes impaires.

En PHP

Voir la démo
Créons tout d’abord 2 styles.
[cc lang=’css’ width=’100%’]
.style1{
background-color : #F2F1EB;
}
.style2{
background-color : #DAE9F4;
}
[/cc]

En PHP on utilise le modulo % (reste de la division) . Le modulo d’une division par 2 permet de savoir si la ligne est paire ou impaire, il ne reste plus qu’à affecter un style pour chacun des 2 cas.
[cc lang=’php’ width=’100%’]
echo « 

« ;
for($i=1; $i < = 10; $i++){ if($i%2){ $classe = "style1"; }else{ $classe = "style2"; } echo "

< /tr> « ;
}
echo « 

ligne $i

ligne $i

« ;
[/cc]
On affecte à la variable $classe l’un ou l’autre des styles et on l’applique à la ligne.

En jQuery

Voir la démo
Partons du même tableau.
[cc lang=’php’ width=’100%’]
echo « 

« ;
for($i=1; $i < = 10; $i++){ echo "

< /tr> « ;
}
echo « 

ligne $i

ligne $i

« ;
[/cc]
et appliquons un style différent selon que les lignes soient paires (even) ou impaires (odd)

[cc lang=’js’ width=’100%’]
$(document).ready(function(){
$(‘table.monTab tr:nth-child(even)’).addClass(‘style1’);
$(‘table.monTab tr:nth-child(odd)’).addClass(‘style2’);
});
[/cc]
On applique donc le style style1 à chaque ligne paire (even) et le style2 à chaque ligne impaire (odd) du/des tableau(x) dont la classe est monTab grâce à la méthode addClass de jQuery, qui ajoute une classe à un élément.

L’utilisation de nth-child permet d’éviter que jQuery se perde si vous avez plusieurs tableaux dans votre page, en effet sinon il continu d’attribuer les couleurs sans repartir à zéro. Ainsi la première ligne du tableau 1 pourrait être bleue alors que la première ligne du tableau 2 serait blanche.