Event onclick cellule tableau

**iVezics** · 22/02/2017, 14h36

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 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
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>

**badaze** · 22/02/2017, 19h29

L'idée est d'ajouter un champ etat dans ta table. Dans l'exemple ci-dessous j'ai défini le champ etat comme prenant les valeurs 0 ou 1. Mais tu peux faire comme bon te semble sauf sauvegarder la couleur dans la base de données.

Comme je n'ai pas ta table j'ai fait un tableau pour la simuler. Le code tient compte du champ etat pour afficher la bonne couleur dès le départ. Le truc est d'utiliser un champ caché (hidden) auquel on affecté un id unique qui permet d'en modifier sa valeur. ATTENTION le name="etat" est le même pour toutes les lignes et c'est tout à fait normal.

Ensuite l'enregistrement se fait comme pour les autres données via le bouton Valider.

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
 
<?php 
  // Couleurs de fond
  $couleurFond0 = "black";
  $couleurFond1 = "GreenYellow";  
?>
<script>
function changeCouleur(unObjet,numeroLigne) {
 valeur = document.getElementById('etat'+numeroLigne).value;
 if (valeur == '0') {
  document.getElementById('etat'+numeroLigne).value = '1';
  unObjet.style.backgroundColor = '<?php print $couleurFond1;?>';
 } else {
  document.getElementById('etat'+numeroLigne).value = '0';
  unObjet.style.backgroundColor = '<?php print $couleurFond0;?>';  
 }
}</script>
<?php
    // simulation d'une table avec ajout d'un champ "etat" qui prend les valeurs 0 ou 1.
 $rows   = array();
 $rows[] = array('idCal'=>1, 'societeClient' => 'Badaze', 'dateCal'=>'2017-01-30','notesCal'=>'urgent'    ,'etat'=>'1');
 $rows[] = array('idCal'=>2, 'societeClient' => 'ACME'  , 'dateCal'=>'2017-02-01','notesCal'=>'pas pressé','etat'=>'0');
?>
<table>
   <tr>
        <th>Client</th>
        <th>Nom de société</th>
        <th>Etat</th>
        <th>Dates d'intervention</th>
        <th>Notes de Maintenance</th>
    </tr><?php
$numeroLigne = 0;
foreach($rows as $row) {
  $numeroLigne++;
  $couleurFond = $row['etat'] == '0' ? $couleurFond0 : $couleurFond1; ?>
    <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 style="background-color:<?php print $couleurFond; ?>" onclick="changeCouleur(this,<?php print $numeroLigne;?>)" >
     <input type="hidden" name="etat" id="etat<?php print $numeroLigne;?>" value="<?php echo $row['etat']; ?>"/>
  </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
}?>
</table>

**iVezics** · 23/02/2017, 10h12

Respect à toi l'ami ! Le code que tu as fournis et tout à fait juste ( après légère réadaptation, mais tu m'a mâché tout le boulot ), et dire que j'ai déjà demandé a quelques personnes dont un modérateur de ce site qui m'a dit qu'il fallait faire du JS + envois avec Ajax ( et j'y connais rien en Ajax...), surtout qu'il m'a rien expliqué et rien donné comme indication de code ! Bref merci à toi tu es mon sauveur !

**badaze** · 23/02/2017, 18h58

Merci. C'est sympa de ta part.

Je pense qu'il faut déjà connaître JS avant de s'attaquer à jQuery. En ce qui me concerne le JS, le jQuery ou le PHP ne sont que des hobbies donc je suis loin d'avoir le niveau de qui les utilise professionnellement mais j'arrive toujours à faire ce que je veux !!!

Event onclick cellule tableau

JavaScript

Discussions similaires

Partager

Partager