Changement de couleur d'une case

**iVezics** · 22/02/2017, 12h46

Bonjour, j'ai un problème concernant ma page de calendrier v_calendrier :
J'ai une colonne "état", et j'ai besoin que lorsque l'on clique dessus, la couleur de la case se change en vert ( jusqu'ici ça fonctionne ), mais je n'arrive pas a mettre en place l'option que lorsqu'on REclique dessus, ça repasse en rouge. Puis après ça, j'aimerais stocker la couleur de la colonne ( vert ou rouge ) dans ma base de données et ça je ne sais pas du tout comment faire ( récupérer la couleur d'une case d'un tableau pour la stocker dans la table "infocalendrier" dans ma BDD "fichesclients".

Voici le code de ma page :

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
<?php
session_start();
 
 
 if (isset($_POST['validerCal']))
{
    $pdo = new PDO('mysql:host=localhost;dbname=fichesclients','root','', array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES \'UTF8\''));
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    $idCal = $_POST['idCal'];
    $societeClient = $_POST['societeClient'];
    $dispoCal = $_POST['dispoCal'];
    $dateCal = $_POST['dateCal'];
    $notesCal = $_POST['notesCal'];
    
    $sql = "UPDATE infocalendrier SET societeClient = '$societeClient', dispoCal = '$dispoCal', dateCal = '$dateCal', notesCal = '$notesCal' WHERE idCal in ('$idCal')";
 
    $requete = $pdo->query($sql);
}
?>
 
<html>
<head>
 
<meta charset="utf-8"/ >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel ="stylesheet" href = "main.css" type = "text/css">
<link rel="stylesheet" media="screen and (min-device-width:768px) and (max-device-width:1023px)" href="mainMin768.css" type="text/css" />
<link rel="stylesheet" media="screen and (min-device-width:1024px) and (max-device-width:1300px)" href="mainMin1024.css" type="text/css" />
<link rel="stylesheet" media="screen and (min-device-width:1301px) and (max-device-width:1400px)" href="mainMin1301.css" type="text/css" />
<link rel="stylesheet" media="screen and (min-device-width:1401px)" href="mainMin1401.css" type="text/css" />
 
    <title>InfobisPro</title>
 
</head>
 
<body style="background-color: black; color:white;">
<div id = "bienvenueCal" style ="text-align:center; margin-top:2%; font-size:20px;">
    <h1>Bienvenue sur la page du calendrier mensuel !</h1><br>
</div>    
<script type="text/javascript"> 
function ConfirmMessage() {
    if (confirm("Voulez-vous modifier ce client ?")){
        alert("Le client a bien été modifié !");
        window.location.assign('v_calendrier.php');
    }
}
 
function ConfirmMessageDelete() {
    if (confirm("Voulez-vous réinitialiser toutes les données de tous les clients ?")){
        alert("Toutes les données de tous les clients ont été réinitialisées");
        window.location.assign('v_calendrier.php');
    }
}
    
function changeClasse(td, couleur){
        td.className = couleur;
}    
</script>
 
<?php
 
$pdo = new PDO('mysql:host=localhost;dbname=fichesclients','root','', array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES \'UTF8\''));
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = 'SELECT * FROM infocalendrier';
$req = $pdo->query($sql); 
 
?>
<form method="post" action="v_liste.php">
    <INPUT class ="boutonRetourCal" TYPE="submit" value="Retour"/>
 
 
<input class="boutonDeleteCal" type="submit"  name="deleteCal" value="Réinitialisation mensuelle" onClick="ConfirmMessageDelete()"/>  
</form>
<table class = "tableCalendrier">
    <tr>
        <th style ="width:6%;">Client
        </th>
 
        <th style ="width:20%;">Nom de société
        </th>
        <th>
            Etat
        </th>
        <th style ="width:10%;">
            Dates d'intervention
        </th>
        <th>
            Notes de Maintenance
        </th>
    </tr>
 
<?php
     while($row = $req->fetch()){ ?>
	   <tr><form action ="v_calendrier.php" method="post">  
        <td><input class ="inputCalId" style="text-align:center;" type="text" name = "idCal" value="<?php echo $row['idCal']; ?>" readonly></td>
        <td><input class ="inputCal" style="text-align:center;" type="text" name = "societeClient" value="<?php echo $row['societeClient']; ?>" readonly></td>
        <td onclick="this.style.backgroundColor = 'GreenYellow'" ></td>
 
        <td><input class ="inputCalDate" type="date" name = "dateCal" value="<?php echo $row['dateCal']; ?>"></td>
        <td><input class ="inputCal" type="text" name = "notesCal" value="<?php echo $row['notesCal']; ?>"></td>    
		<td><input class="boutonValiderCal" type="submit"  name="validerCal" value="Valider" onClick="ConfirmMessage()"/></td>    
       </form>
</tr>  
<?php 
}
$req->closeCursor();
?>
 
</table>
 
</body>
</html>

Merci d'avance.

**Vil'Coyote** · 22/02/2017, 17h17

Alors, étant donné que dans ton TD tu force la class via le onclik cela risque d'être difficile. il serait préférable de mettre une classe par défaut (qui est ton rouge) et lorsque qu'il y a un "clic" d'appeler une fonction javascript pour changer la couleur en fonction du style en cours. de plus, tu gère des formulaire par "TR" ce qui normalement ne se fait pas. Enfin, pour stocker l'état en base, il faut connaître la ligne. donc il te faudra certainement en plus de changer le style, ajout une variable hidden par ligne de tableau donc des hidden numéroté afin de savoir sur quelle ligne tu travail.
Bref, je pense qu'il y a quelque petite chose à revoir dans la structure de ton tableau et dans la méthode d'utilisation afin d'obtenir le but souhaité et ce de manière plus ou mois propre.

Changement de couleur d'une case [HTML 5]

HTML

Discussions similaires

Partager

Partager