Event onclick cellule tableau
Bonjour, dans ma page calendrier j'ai un tableau avec plusieurs colonnes et lignes, et lorsque l'on clique sur une cellule de la colonne "Etat", la couleur de fond de la cellule passe de noir à vert.
J'aimerais tout d'abord savoir si c'est possible de faire en sorte que lorsqu'on re-clique sur la cellule, que la couleur repasse en noir ( 1er clic => la couleur passe de noir à vert, 2ème clic => la couleur passe de vert à noir ). Puis j'aimerais aussi stocker dans une variable la couleur de cette cellule, pour l'enregistrer dans la table "infocalendrier" dans la base de données "fichesclients" lorsqu'on clique sur le bouton "Valider", mais ça je ne sais pas du tout faire... Merci de m'aider
Code:
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
115
116
117
| <?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> |
