Discussion :

[sebastien85000]

Bonjour à tous,

Alors j'ai plusieurs petit soucis dont en voici un.

Actuellement, j'ai une page html qui affiche un tableau rempli de lignes provenant d'une table sql via php.

Dans cette table, j'ai une colonne "d'etat" qui pour la valeur "oui" se colore en vert et en rouge pour la valeur"non".
tout fonctionne nickel selon l'entrée dans la table SQL.

J'aimerais, sur ma page html que lorsque je clique dans cette cellule, celle-ci change d'état. Si elle est verte, 1 clic et elle deviens rouge et inversement.

Avez vous une idée de la manip ?

voici quelques code que j'ai.

recuperation :

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
<?php
// --------------------------------
// La requete (exemple) : tous les "objet", classés par "id".
$query = "SELECT * FROM cacahuete ORDER BY pistache ASC;";
  try {
    $pdo_select = $pdo->prepare($query);
    $pdo_select->execute();
    $NbreData = $pdo_select->rowCount();   
    $rowAll = $pdo_select->fetchAll();
  } catch (PDOException $e){ echo 'Erreur SQL : '. $e->getMessage().'<br/>'; die(); }
// --------------------------------
// affichage
if ($NbreData != 0) 
{
?>
<!-

fond selon etat :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<td class="th">
            <?php if ( $row['banane'] == 'oui' ) 
                {
                    echo '<div class="oui">'.$row['banane'].'</div>';
                } 
                elseif ( $row['banane'] == 'non' )
                {
                    echo '<div class="non">'.$row['banane'].'</div>';
                } ?></td>

le css :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.oui {
background: green;
border-radius: 250px;
color: green;
width: 30px;
margin-left: 20%;
}
 
.non {
background: red;
border-radius: 250px;
color: red;
width: 30px;
margin-left: 20%;
}

le rendu :




Merci beaucoup.

[johnlobs]

Bonjour,

J'aimerais, sur ma page html que lorsque je clique dans cette cellule, celle-ci change d'état. Si elle est verte, 1 clic et elle deviens rouge et inversement.

Comme t'as dit psychadelic, tu dois changer la valeur en bd,ce qui est delicat si tu ne change pas certaines choses.
En effet , tu peux changer la couleur en utilisant du jquery ou javascript mais cette valeur devra etre persistée en BD.
Pour cela , il va falloir :
-Soit integrer dans la colonne concernée une liste deroulante avec l'etat en BD affiché mais avec un changement des etats existants dans ta table etat si elle existe et ainsi executer une methode du controlleur en cas de selection(grace a un listener ajax).

-Soit integrer une petite icone dans chaque cellule etat qui sera un bouton et lancera la methode de persistance de ton controlleur.

Tu n'a pas mis le code de ton tableau...
Ne pas oublier les updates en cas de non rechargement automatique de ton tableau.

Bon courage.

[Invité]

Bonjour,

Je ne suis pas d'accord avec psychadelic.

On peut très bien modifier les valeurs en base de données à partir d'un click dans une cases.

Pour cela, il faut utiliser un script JavaScript/jQuery qui :

1. modifiera l'aspect du bouton dans la table (oui<-->non)
2. via Ajax, appellera un fichier PHP externe qui se chargera de modifier la valeur en bdd.

Par contre, il faut pouvoir identifier quelle ligne et quelle valeur il faut modifier !
Pour ça, il faut un "identifiant" au niveau de la case du tableau

Au fait :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
           <td> <?php if ( $row['banane'] == 'oui' ) 
                {
                    echo '<div class="oui">'.$row['banane'].'</div>';
                } 
                elseif ( $row['banane'] == 'non' )
                {
                    echo '<div class="non">'.$row['banane'].'</div>';
                } ?></td>

Puisque $row['banane'] prend les valeurs 'oui' et 'non', ça s'écrit tout simplement :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

           <td><div class="<?php  echo $row['banane']; ?>"><?php  echo $row['banane']; ?></div></td>

On peut alors écrire (par exemple) :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

<td><div class="<?php  echo $row['banane']; ?>" data-id="<?php  echo $row['id']; ?>" data-col="banane" data-val="<?php  echo $row['banane']; ?>" onclick="changeValueBdd(this);"><?php  echo $row['banane']; ?></div></td>

Et la fonction JavaScript :

Code JavaScript :

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
function changeValueBdd( div )
{
  // div : ce div (qui a été clické)
  // --------------------
  // id : index auto-incrémenté de la ligne à modifier
  var id = div.dataset.id;
  // col : nom de la colonne à modifier
  var col = div.dataset.col;
  // oldval : ancienne valeur
  var oldval = div.dataset.val;
  // newval : nouvelle valeur
  var newval = (oldval == 'oui')? 'non' : 'oui';
  // --------------------
  // 1- on fait appel à Ajax : on transmet id, col et newval au fichier PHP qui effectuera l UPDATE en Bdd
  // ...
  // --------------------
  // 2- on modifie le bouton
  div.textContent = newval;
  div.classList.toggle('non');
  div.classList.toggle('oui');
  div.setAttribute('data-val',newval);
  // --------------------
}

Pour l'appel Ajax, je te renvoie aux cours : cours et tutoriels pour apprendre l'AJAX

[sebastien85000]

Merci à tous de vos réponses.

@psychadelic : ta réponse me parais bizarre.. Mais pourquoi pas.

@johnlobs : ok. Pour les couleurs, on s'en fous. C'est juste de l'affichage. Un bouton, oui j'y ai pensé. Il faudrait a la limite faire un bouton transparent de la taille de la cellule. tu veux plus de code pour le tableau ?

@jreaux62 : Super ! je ne connais pas du tout l'Ajax. Je vais me penché dessus.
PS, je viens de m'apercevoir dans ta signature que c'est ton tuto que j'ai suivi pour la connexion et le tableau Coool

En tout cas j'ai des éléments. Merci beaucoup. C'est toujours un plaisir de poster sur ce forum.

[psychadelic]

@psychadelic : ta réponse me parais bizarre.. Mais pourquoi pas.

n'en déplaise à jreaux62, je n'ai fait que répondre à ta question dans le titre

click sur tableau avec sql

:

changer les valeurs dans l'affichage ne pourra jamais les changer dans ta table SQL...
les commandes SQL agissent du coté serveur, pas du coté client

et de toutes façon, cette histoire est absurde de A à Z.
un premier poste internet peu cocher une case tandis qu'un second la décochera, qui à raison ?.
Alors utilisation d'Ajax ou non, il y a d'abord à régler ce problème de multi-utilisateurs.

[sebastien85000]

Bonjour,

Merci pour ta réponse qui n'apporte aucune aide au sujet. Le site que je suis en train de mettre en place, n'aura aucunement ce problème là dans le cadre où il sera utilisé. C'est un site privé interne.

Cdlmnt

[johnlobs]

Bonjour,

Il faudrait a la limite faire un bouton transparent de la taille de la cellule

Pas besoin de mettre un bouton transparent de la taille de la cellule,tu peux mettre dans ta colonne deux éléments comme tu le souhaites:
la valeur du champs et le bouton à coté que tu ajusteras comme tu le souhaites ou bien même mettre uniquement un bouton avec comme "title" la valeur de ton objet qui se modifiera au click sur le bouton.

Je pense perso qu'il est préférable de scinder ton fonctionnement de la manière suivante:

Séparer l'affichage , la modification et la suppression.

Pour cela il faudra une colonne supplémentaire ou tu proposeras les différentes actions possibles sous forme de boutons .

Si l'utilisateur souhaite supprimer une ligne,il faudra un message de confirmation.
Si l'utilisateur souhaite modifier une colonne , tu affichera un dialog de modification (dans lequel l’état pourras être modifié via une liste déroulante)
Et tu laisseras bien-sur le tableau faire son travail d'affichage.

Comme cela, tu éviteras les manipulation involontaires qui iront jusqu'à persister des valeurs en BDD alors que ton utilisateur ne voulais rien faire.

tu veux plus de code pour le tableau

Non!Pas vraiment , ce n'était qu'une recommandation pour que tu aies des réponses plus claires et complètes.

Cordialement,