Discussion :

[Skunka]

Bonsoir,

j'espère que mon problème ne vient pas d'une erreur banale mais le voici: je récupère des données depuis ma bdd puis je les organise dans un tableau html, celui est correct, mais, par soucis de lisibilité, j'ai essayé de mettre en place une coloration des cellules du tableau suivant un ordre logique. Première ligne en vert, suivis de l'orange avant de revenir sur le vert, et par colonne, j'alterne la couleur (vert / vert pâle / vert / ...) mais voici ce que j'obtient:


(La première colonne qui n'apparaît pas complètement pour respecter l'anonymat des salariés mais elle n'est même pas colorée)

Il me semble flagrant que ce n'est pas le rendu que je souhaite

Voici le code correspondant:

Code php :

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
 
<table border="1" style="text-align: center;">
			<tr>
				<th> </th>
				<th colspan="2">Lundi</th>
				<th colspan="2">Mardi</th>
				<th colspan="2">Mercredi</th>
				<th colspan="2">Jeudi</th>
				<th colspan="2">Vendredi</th>
			</tr>
			<tr>
				<td> </td>
				<td>M</td>
				<td>A</td>
				<td>M</td>
				<td>A</td>
				<td>M</td>
				<td>A</td>
				<td>M</td>
				<td>A</td>
				<td>M</td>
				<td>A</td>
			</tr>
 
			<?php
			$numCouleur = 21; //Variable servant à la coloration du tableau: 11=vert, 12=vert pale, 21=orange pale, 22=orange
			$req2 = "SELECT DISTINCT planningChantier.numSalarie, nomSalarie, prenomSalarie FROM planningChantier, salarie WHERE planningChantier.numSalarie = salarie.numSalarie AND numSemaine = ".$semaine." ORDER BY nomSalarie, prenomSalarie ";
			try{
				$stmt2 = $pdo->prepare($req2);
				$stmt2->execute();
				while ($row2 = $stmt2->fetch(PDO::FETCH_ASSOC)) {
					//Gestion de la variable de coloration
					if ($numCouleur > 20) { //ou si c'est égale à 21 ou 22
						$numCouleur = $numCouleur - 10;
					} else if ($numCouleur < 20) { //donc 11 ou 12
						$numCouleur = $numCouleur + 10; 
					}
 
					echo "<tr>";
						echo "<td class='".$numCouleur."'> <input type='hidden' value='".$row2["numSalarie"]."'>".$row2["nomSalarie"]."  ".$row2["prenomSalarie"]; 
						echo "</td>";
						$req1 = "SELECT * FROM planningChantier, salarie, chantier, vehicule WHERE numSemaine =".$semaine." AND planningChantier.numSalarie = salarie.numSalarie AND planningChantier.numSalarie = ".$row2["numSalarie"]." AND planningChantier.numChantier = chantier.numChantier AND planningChantier.numVehicule = vehicule.numVehicule ORDER BY nomSalarie, prenomSalarie, dateJour, numCreneau";
						$stmt1 = $pdo->prepare($req1);
						$stmt1->execute();
						while ($row1 = $stmt1->fetch(PDO::FETCH_ASSOC)) {
							echo "<td class='c".$numCouleur."'>";
							echo "".$row1["nomChantier"]."<br>".$row1["nomVehiculeABRG"];
							echo "</td>";
							//Gestion de la variable de coloration
							if ($numCouleur = 11 or $numCouleur = 21) {
								$numCouleur = $numCouleur + 1;
							} else if ($numCouleur = 12 or $numCouleur = 22) {
								$numCouleur = $numCouleur - 1;
							}
						 } 
 
					echo "</tr>";
				}
			}
			catch(Exception $e){
				print "Erreur ! ".$e->getMessage(). "<br/>";
			}
			?>

Je me sert d'une variable pour attribuer la valeur de la classe. Je pense que la logique du code est correcte (ou ma logique est à revoir!) et j'arrive pas à déterminer l'origine du problème...
N'hésitez pas si il vous faut plus d'informations et merci d'avance de vos réponses!

Edit: voici mon code couleur:
11 => vert
12 => vert clair
21 => orange clair
22 => orange

Cordialement,
Skunka.

[Invité]

Bonjour,

1- L'alternance de couleur des lignes peut se faire en CSS pur :

• tr:nth-child(odd) {...}
• tr:nth-child(even) {...}

2- pour la 1ère colonne, idem :

• tr td:nth-child(1) {...} ou tr td:first-child {...}

3- 1ère colonne, 1ère ligne :

• tr:first-child td:first-child {...}

Voir cet exemple.


4- pour les cas particuliers (cellules colorées dynamiquement, en fonction du PHP), là tu peux utiliser des classes css.

5- je te conseille aussi de mettre un <thead> et un <tbody>

• Les tableaux (XHTML & CSS)

[Skunka]

Bonjour et merci de ta réponse,

j'ai essayé différente chose avec ce que tu m'as fournis mais je n'arrive pas à avoir le résultat voulu.
Voici ce qui me rapproche le plus de ce que je souhaite:

Code html :

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
 
<style type="text/css">
        tr:nth-child(odd) {
                background-color: rgb(0, 179, 0, 1); /* vert */
        }
        tr:nth-child(even) {
                background-color: rgb(255, 102, 0, 1); /* orange */
        }
 
        td:nth-child(odd) {
                background-color: opacity:1; /* vert pâle */
        }
        td:nth-child(even) {
                background-color: opacity:0.7; /* orange pâle */
        }
        
</style>

Et un bref aperçu du résultat:



Les lignes sont correctement alternées mais pour les colonnes ce n'est pas ça...

4- pour les cas particuliers (cellules colorées dynamiquement, en fonction du PHP), là tu peux utiliser des classes css.

Je me demande si je ne suis pas dans un cas particulier et donc reprendre mon php serait-il plus pertinent ?

Cordialement,
Skunka.

[Invité]

Bonjour,

1- Je t'ai mis des exemples de code CSS.
Tu pourrais au moins les copier correctement.

J'ai mis des liens aussi...

Et as-tu suivi mon conseil ?


2- Tu n'as pas defini de CSS pour la 1ere colonne...

• tr td:first-child {...}

3- Et ton alternance ne correspond pas à ce que tu avais dit dans le 1er message (vert/vert clair).
Ce n'est même pas le même tableau !
Et trouve des couleurs moins criardes. Ça fait mal aux yeux...

[Skunka]

Bonjour,
1- Je t'ai mis des exemples de code CSS.
Tu pourrais au moins les copier correctement.

J'ai mis des liens aussi...

Et as-tu suivi mon conseil ?

C'est la première fois que je me sert des "CSS selectors", il se peut que j'ai laissé une erreur certes (le manque de "table thead/tbody" avant tr td:first-child {...} ?).... mais j'ai tout de même pris le temps de lire les liens que tu as mis, chacun m'apportant des infos utiles, ainsi que d'autres explications sur ce sujet (notamment W3Schools). Quand à ton conseil, je l'ai bien appliqué mais pas directement sur ce tableau (j'avoue mon erreur d'avoir appliqué ce conseil à un seul tableau).

2- Tu n'as pas defini de CSS pour la 1ere colonne...

• tr td:first-child {...}

La première colonne à les couleurs correctes ici, mais je vais tout de même m'arranger pour laisser en blanc les cellules vides.

3- Et ton alternance ne correspond pas à ce que tu avais dit dans le 1er message (vert/vert clair).
Ce n'est même pas le même tableau !
Et trouve des couleurs moins criardes ! Ça fait mal aux yeux...

Tu as manqué une information qui à crée cette confusion, l'alternance (vert/vert clair) se fait sur les lignes en vert mais j'ai la même alternance (orange/orange clair) sur les lignes oranges. La couleur des lignes alterne donc comme ci (vert / orange / vert /... ) afin d'avoir un maximum de lisibilité. J'espère avoir était plus clair cette fois-ci.
Effectivement le tableau n'est exactement le même, le précédent sert à l'affichage du planning et celui sert à sa création, la seule différence est le contenu des cellules ce qui n'impacte pas la coloration. Je ne voulais pas que le php déjà présent interfère avec la solution que tu m'as présenté mais les changements seront ensuite appliqués à tous mes tableaux.
Pour les couleurs, pas de panique! Elles ne sont pas définitives.

Je repose donc ma question, ce que je souhaite est faisable avec les ressources que j'ai et le problème vient de moi ou dois-je de nouveau attribuer mes "class" grâce au php ?

Cordialement,
Skunka.

[Invité]

Alors redéfinis clairement ce qui ne va pas.

Pour moi, alterner 1 ligne sur 2 suffit.

Pas besoin de vert/orange + clair/foncé (soit 1 ligne sur 4).
Ça n'apporte rien en "clarté" !

Par contre, tu peux appliquer un effet "+ clair" sur le :hover.