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