alternance couleur sur tableau dynamique

**asus02** · 19/09/2011, 14h29

bonjour,
je n'arrive pas a modifier les couleur du tableau, j'essaie en vain d'alterner les couleurs mais ca ne fonctionne pas ..

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
$table = array(array(1,2,3,4,5,6,7,8,9,10,11)); //Tableau de resultats
 
$i = 0;
 
echo '<table width="700" border="0">'; //Création du tableau
 
foreach($table as $donnees) {
 
	echo '<tr class="prem" bgcolor="'.( ($i++ % 2 == 0) ? '#dddddd' : '#eeeeee' ).'">'; //Création d'une nouvelle ligne
	echo '<td  width="120px">'.$projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td  width="156px">'.$date.'</td>'; //Création d'une nouvelle colonne
	echo '<td  width="118px">'.$etat.'</td>'; //Création d'une nouvelle colonne
	echo '<td  width="168px" style="color:red;">'.$numero_projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td  width="122px"><input type="checkbox" name="mel[]" id="mel">&nbsp;&nbsp;<input type="checkbox" name="mel[]" id="mel" checked="checked"><br/><font-size="1">on&nbsp;&nbsp;off</font></td>'; //Création d'une nouvelle colonne
	echo '</tr>'; //Fin de la ligne
$i++;
	}
 
echo '</table>'; //Fermeture du tableau
 
 
?>

**mathieu44800** · 19/09/2011, 14h34

Bonjour,

Tu incrémentes deux fois ta variable $i.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
echo '<tr class="prem" bgcolor="'.( ($i % 2 == 0) ? '#dddddd' : '#eeeeee' ).'">';

Devrais mieux fonctionner...

Cordialement,

Mathieu

**Celira** · 19/09/2011, 14h37

Tu fais deux fois i++ dans ta boucle !

Du coup, ça revient à faire +2 à chaque tour...

**asus02** · 19/09/2011, 14h39

merci pour ta réponse, j'ai essayé mais ca reste pareil je n'est pas d’alternance.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
$table = array(array(1,2,3,4,5,6,7,8,9,10,11)); //Tableau de resultats
 
$i = 0;
 
echo '<table width="700" border="0">'; //Création du tableau
 
foreach($table as $donnees) {
	echo '<tr class="prem" bgcolor="'.( ($i % 2 == 0) ? '#dddddd' : '#eeeeee' ).'">';	//Création d'une nouvelle ligne
	echo '<td  width="120px">'.$projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td  width="156px">'.$date.'</td>'; //Création d'une nouvelle colonne
	echo '<td  width="118px">'.$etat.'</td>'; //Création d'une nouvelle colonne
	echo '<td  width="168px" style="color:red;">'.$numero_projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td  width="122px"><input type="checkbox" name="mel[]" id="mel">&nbsp;&nbsp;<input type="checkbox" name="mel[]" id="mel" checked="checked"><br/><font-size="1">on&nbsp;&nbsp;off</font></td>'; //Création d'une nouvelle colonne
	echo '</tr>'; //Fin de la ligne
    $i++;
	}
 
echo '</table>'; //Fermeture du tableau
 
 
?>

____
edit

je me suis servie de ce tuto pour ca, ce qui vet dire qu'il ont fait une erreur ?

Lors de l'affichage de données tabulaires de manière dynamique, il est facile d'améliorer la lisibilité du tableau créé en demandant à PHP d'alterner les couleurs une ligne sur deux.

On utilise pour cela l'opérateur % (appelé "modulo"), qui renvoi le reste d'une division :
5 / 2 = 2.5
5 % 2 = 1

Avec cet opérateur, on peut savoir si un chiffre est pair ou non (son reste est égal à 0) et donc, en utilisant une variable que l'on incrémente au fur et à mesure de la création du tableau, donner une couleur aux cases paires, et une autre... aux autres.

Le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
$gains = array(
  'Janvier' => 51651,
  'Février' => 651651,
  'Mars' => 651651,
  'Avril' => 65165,
  'Mai' => 919851,
  'Juin' => 12304,
  'Juillet' => 56518,
  'Août' => 7889,
  'Septembre' => 189121,
  'Octobre' => 15416,
  'Novembre' => 156515,
  'Décembre' => 65165
  );
 
$i = 0;
echo "<table border='1'>";
echo "<caption>Nos gains sur l'année</caption>";
echo "<tr bgcolor='#cccccc'><th>Mois</th><th align='right'>Gain</th></tr>";
 
foreach ($gains as $mois => $gain)
  {
  if ($i % 2 == 0)
    {
    echo "<tr bgcolor='#dddddd'><td>$mois</td><td align='right'>$gain</td></tr>";
    }
  else
    {
    echo "<tr bgcolor='#eeeeee'><td>$mois</td><td align='right'>$gain</td></tr>";
    }
  $i++;
  }
echo "</table>";
?>

on peut aussi simplifier la boucle foreach() , en utilisant l'opérateur ternaire ? :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
foreach ($gains as $mois => $gain)
  {
  echo "<tr bgcolor='".( ($i++ % 2 == 0) ? '#dddddd' : '#eeeeee' )."'><td>$mois</td><td align='right'>$gain</td></tr>";
  $i++;
  }

**mathieu44800** · 19/09/2011, 14h50

Dans ce cas la, c'est peu être le fait de se servir d'attributs HTML obsolètes, comme "bgcolor".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
echo '<tr class="prem '.( ($i % 2 == 0) ? 'classe1' : 'classe2' ).'">';	//Création d'une nouvelle ligne

Et dans ta feuille de style CSS, tu affectes un background spécifique à ces deux classes.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.classe1 {
background:#dddddd;
}
 
.classe2 {
background:#eeeeee;
}

Cordialement,

Mathieu

**Celira** · 19/09/2011, 14h53

Ce code là fonctionne chez moi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$table = range('a','z');
$i = 0;
echo '<table>';
foreach ($table as $elt) {
	echo '<tr bgcolor="'.( ($i % 2 == 0) ? '#dddddd' : '#eeeeee' ).'">';
	echo '<td>'.$elt.'</td>';
	echo '</tr>';
	$i++;
}
echo '</table>';

mais effectivement comme le dit mathieu, c'est mieux de passer par des classes pour la couleur

Et au passage, oui, il ya une erreur dans le code d'origine.

**mathieu44800** · 19/09/2011, 15h00

Tu as raison, Celira, ^^.

Le tableau de base est mal initialisé, remplacer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$table = array(array(1,2,3,4,5,6,7,8,9,10,11));

par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$table = array(1,2,3,4,5,6,7,8,9,10,11);

Ou par une boucle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
for ($i=0;$i<10;$i++)
{
    // Pas besoin d'incrémenter dans ce cas la...
}

Cordialement,

Mathieu

**asus02** · 19/09/2011, 15h18

merci a vous deux de m'aider c'est sympa car j'apprend tout juste le php alors je m'interroge a chaque fois de manière a comprendre le code.
donc j'ai bien modifier le array de mon tableau, mais je ne comprend pas pour quoi maintenant chaque projet et multiplié par onze ? sinon les couleur sont bien alternés.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<?php
$table = array(1,2,3,4,5,6,7,8,9,10,11); //Tableau de resultats
$i = 0;
 
 
echo '<table width="700" border="0">'; //Création du tableau
 
foreach($table as $donnees) {
 
    echo '<tr class="prem '.( ($i % 2 == 0) ? 'classe1' : 'classe2' ).'">'; //Création d'une nouvelle ligne
	echo '<td width="120px">'.$projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="156px">'.$date.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="118px">'.$etat.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="168px" style="color:red;">'.$numero_projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="122px"><input type="checkbox" name="mel[]" id="mel">&nbsp;&nbsp;<input type="checkbox" name="mel[]" id="mel" checked="checked"><br/><font-size="1">on&nbsp;&nbsp;off</font></td>'; //Création d'une nouvelle colonne
	echo '</tr>'; //Fin de la ligne
$i++;
	}
 
echo '</table>'; //Fermeture du tableau
 
 
?>

meme de cette facon je me retrouve multiplié par 20

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
$table = range('a','z');
$i = 0;
echo '<table width="700" border="0">'; //Création du tableau
foreach ($table as $elt) {
	echo '<tr bgcolor="'.( ($i % 2 == 0) ? '#dddddd' : '#eeeeee' ).'">';
	echo '<td width="120px">'.$projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="156px">'.$date.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="118px">'.$etat.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="168px" style="color:red;">'.$numero_projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="122px"><input type="checkbox" name="mel[]" id="mel">&nbsp;&nbsp;<input type="checkbox" name="mel[]" id="mel" checked="checked"><br/><font-size="1">on&nbsp;&nbsp;off</font></td>'; //Création d'une nouvelle colonne
	echo '</tr>'; //Fin de la ligne
    $i++;
	}
 
echo '</table>'; //Fermeture du tableau
 
 
?>

**Celira** · 19/09/2011, 15h21

Je pense que le problème vient maintenant du reste de ton code, à savoir à partir de quoi est remplie ta table. A priori, tu ne fais pas des lignes juste pour le plaisir

**asus02** · 19/09/2011, 15h27

alors j'ai bien analysé le code et j'en est deduis ceci qui fonctionne nikel

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
for ($i=0;$i<1;$i++)
{
 
    echo '<table width="700" border="0">'; //Création du tableau
	echo '<tr bgcolor="'.( ($i % 2 == 0) ? '#dddddd' : '#eeeeee' ).'">';
	echo '<td width="120px">'.$projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="156px">'.$date.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="118px">'.$etat.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="168px" style="color:red;">'.$numero_projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="122px"><input type="checkbox" name="mel[]" id="mel">&nbsp;&nbsp;<input type="checkbox" name="mel[]" id="mel" checked="checked"><br/><font-size="1">on&nbsp;&nbsp;off</font></td>'; //Création d'une nouvelle colonne
	echo '</tr>'; //Fin de la ligne
 
	}
 
echo '</table>'; //Fermeture du tableau
 
 
?>

je ne pense pas avoir d'erreur, j'ai verifier si en entrant une nouvelle donnée mon tableau affichais cette info et oui, mais si vous trouvez que le code n'est pas correct dites le moi.

merci

**Celira** · 19/09/2011, 15h38

L'ouverture du tableau echo '<table width="700" border="0">'; devrait être à l'extérieur de la boucle for, mais sinon le principal c'est que ça fonctionne

**asus02** · 19/09/2011, 15h47

en fait j'ai dit une betise ..

sur cette ligne j'ai un soucis :

for ($i=0;$i<11;$i++)

si je laisse comme ca j'ai bien l'alternance des couleurs mais les ligne sont multipliées par 11.

for ($i=0;$i<1;$i++)

si je met comme ca j'ai bien une ligne par projet mais plus d'alternance..

**Celira** · 19/09/2011, 15h57

Je suppose que tu dois avoir une boucle autour du code dont il est question, qui parcourt un tableau avec ta liste de projets ?
On peut voir ce morceau de code là ?

**asus02** · 19/09/2011, 16h03

oui voici le code complet, maintenant meme si je met 11 sur la ligne dont je parlais ca ne le multipli plus mais tjr pas d'alternance.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
<?php
$link = mysqli_connect("localhost", "root", "", "voxo");
$retour = mysqli_query($link ,'SELECT * FROM sites')or die (mysqli_error($link));
$total = mysqli_num_rows($retour);
while ($donnees = mysqli_fetch_array($retour))
{
 
$id=$donnees['id'];
$projet=$donnees['projet'];
$date=$donnees['date'];
$etat=$donnees['etat'];
$numero_projet=$donnees['numero_projet'];
 
?>
<html>
<head>
<style>
table{
margin-left:2px;
margin-right:2px;
text-align:center;
border:0px solid #fff;
}
tr{
height:20px;
border:1px solid #fff;
}
td{
font-size:14px;
font-weight:bold;
height:20px;
border:1px solid #fff;
}
.prem{
background-color:#efefef;
}
 
tr:hover{
background-color:#cdefff;
}
.classe1 {
background:#dddddd;
}
 
.classe2 {
background:#eeeeee;
}
</style>
</head>
<body>
<?php
for ($i=0;$i<8;$i++)
 
 
    echo '<table width="700" border="0">'; //Création du tableau
	{
	echo '<tr class="prem '.( ($i % 1 == 0) ? 'classe1' : 'classe2' ).'">'; 
	echo '<td width="150px">'.$projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="126px">'.$date.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="118px">'.$etat.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="168px" style="color:red;">'.$numero_projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="122px"><input type="checkbox" name="mel[]" id="mel">&nbsp;&nbsp;<input type="checkbox" name="mel[]" id="mel" checked="checked"><br/><font-size="1">on&nbsp;&nbsp;off</font></td>'; //Création d'une nouvelle colonne
	echo '</tr>'; //Fin de la ligne
 
	}
   $i++;	
echo '</table>'; //Fermeture du tableau
 
 
?>
</body>
</html>
<?php
}
?>
 
<? mysqli_close($link); ?>

**Celira** · 19/09/2011, 16h36

Ce que tu veux, c'est parcourir les résultats renvoyés par ta requête et les afficher dans ton tableau, c'est bien ça ?
Pour ça, tu fais une boucle sur les résultats, jusqu'ici tout va bien. Ensuite, la question qu'il faut se poser c'est "qu'est-ce qui doit être dans la boucle ou qu'est-ce qui ne doit pas y être ?", sachant qu'on fait un tour de boucle pour chaque résultat, qu'il y aura donc autant de tours que de projets et que tout ce qui est dans la boucle sera répété à chaque tour.

Donc ce qui doit être dans la boucle : tout ce qui a un rapport avec un résultat. L'affichage d'un résultat, l'affectation des variables qui vont avec.
Ce qui ne doit pas être dans la boucle : les entêtes html (parce qu'elles ne doivent apparaitre qu'une seule fois) et les balises d'ouverture du tableau (parce que sinon tu vas avoir un tableau par résultat, ce qui n'est pas franchement le but)

Et comme tu as déjà une boucle pour parcourir les résultats, pas besoin d'en faire une seconde

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<html>
<head>
	<!-- entetes html une seule fois -->
	<style>
	table{
	margin-left:2px;
	margin-right:2px;
	text-align:center;
	border:0px solid #fff;
	}
	tr{
	height:20px;
	border:1px solid #fff;
	}
	td{
	font-size:14px;
	font-weight:bold;
	height:20px;
	border:1px solid #fff;
	}
	.prem{
	background-color:#efefef;
	}
 
	tr:hover{
	background-color:#cdefff;
	}
	.classe1 {
	background:#dddddd;
	}
 
	.classe2 {
	background:#eeeeee;
	}
	</style>
</head>
<body>
<!-- corps html - une seule fois -->
<?php
$link = mysqli_connect("localhost", "root", "", "voxo");
$retour = mysqli_query($link ,'SELECT * FROM sites')or die (mysqli_error($link));
$total = mysqli_num_rows($retour);
 
//début du tableau
echo '<table width="700" border="0">'; //Création du tableau
 
//Là on boucle sur les résultats
while ($donnees = mysqli_fetch_array($retour))
{
	//on extrait les données du résultat
	$id=$donnees['id'];
	$projet=$donnees['projet'];
	$date=$donnees['date'];
	$etat=$donnees['etat'];
	$numero_projet=$donnees['numero_projet'];
 
	//on affiche le résultat
	echo '<tr class="prem '.( ($i % 1 == 0) ? 'classe1' : 'classe2' ).'">'; 
	echo '<td width="150px">'.$projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="126px">'.$date.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="118px">'.$etat.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="168px" style="color:red;">'.$numero_projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="122px"><input type="checkbox" name="mel[]" id="mel">&nbsp;&nbsp;<input type="checkbox" name="mel[]" id="mel" checked="checked"><br/><font-size="1">on&nbsp;&nbsp;off</font></td>'; //Création d'une nouvelle colonne
	echo '</tr>'; //Fin de la ligne
 
	//on incremente le compteur pour l'alternance
   $i++;	
} //fin de la boucle sur les résultats
echo '</table>'; //Fermeture du tableau
 
?>
</body>
</html>
<? mysqli_close($link); ?>

Est-ce que c'est plus clair comme ça ?

**asus02** · 19/09/2011, 16h52

oufff tu me sauve la vie lol..

bon j'ai fait quelque modif car ca ne fonctionnais pas mais la base etais la.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
$link = mysqli_connect("localhost", "root", "", "voxo");
$retour = mysqli_query($link ,'SELECT * FROM sites')or die (mysqli_error($link));
$total = mysqli_num_rows($retour);
for ($i=0;$i<10;$i++)
//début du tableau
echo '<table width="700" border="0">'; //Création du tableau
 
//Là on boucle sur les résultats
while ($donnees = mysqli_fetch_array($retour))
{
	//on extrait les données du résultat
	$id=$donnees['id'];
	$projet=$donnees['projet'];
	$date=$donnees['date'];
	$etat=$donnees['etat'];
	$numero_projet=$donnees['numero_projet'];
 
	//on affiche le résultat
	echo '<tr class="prem '.( ($i % 2 == 0) ? 'classe1' : 'classe2' ).'">'; 
	echo '<td width="150px">'.$projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="126px">'.$date.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="118px">'.$etat.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="168px" style="color:red;">'.$numero_projet.'</td>'; //Création d'une nouvelle colonne
	echo '<td width="122px"><input type="checkbox" name="mel[]" id="mel">&nbsp;&nbsp;<input type="checkbox" name="mel[]" id="mel" checked="checked"><br/><font-size="1">on&nbsp;&nbsp;off</font></td>'; //Création d'une nouvelle colonne
	echo '</tr>'; //Fin de la ligne
 
	//on incremente le compteur pour l'alternance
   $i++;	
} //fin de la boucle sur les résultats
echo '</table>'; //Fermeture du tableau
 
?>

-------------------------------
j'ai ajouter
for ($i=0;$i<10;$i++)
car i n'etais pas declaré

<tr class="prem '.( ($i % 2 == 0) ? 'classe1' : 'classe2' ).'">';
et passé a 2 pour differencier le nombre de lignes.

un grand merci Celira

**Celira** · 19/09/2011, 17h16

Euh oui, il faut initialiser $i, désolée. Par contre, un simple $i = 0; avant le while ($donnees = mysqli_fetch_array($retour)) suffit, inutile de se compliquer la vie

Si ça fonctionne, n'oublies pas de cliquer sur

**stealth35** · 19/09/2011, 17h47

tu peux faire ça direct en CSS3 (et les autres (vieux) alors ? bah tenpis

)

**Benjamin Delespierre** · 19/09/2011, 18h31

Comme l'a dit stealth, le mieux c'est d'utiliser une règle CSS 3:
- http://www.quirksmode.org/css/nthchild.html

Sinon tu peux aussi le faire en JS avec du jQuery par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('table tr:odd td').css('background-color', 'red');

Ou encore, en utilisant le plugin Zebra de TableSorter:
- http://tablesorter.com/docs/

**mathieu44800** · 24/09/2011, 11h23

Ces sélecteurs (CSS3) ne sont pas compatibles avec tous les navigateurs.

Pour l'emploi de Javascript (jQuery) ou de plugins, moi je dis dans ce cas la, pourquoi pas utiliser un tractopelle pour enlever un clou...

Je vous rappelles, messieurs, qu'il débute... Autant lui apprendre les bases, avant de lui donner des conseils de développeurs chevronnés...

Cordialement,

Mathieu

alternance couleur sur tableau dynamique

Langage PHP

Discussions similaires

Partager

Partager