Click sur tableau avec sql

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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:

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 :

Pièce jointe 409442

Merci beaucoup.

06/09/2018, 12h04
johnlobs

Bonjour,

Citation:

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...:aie:
Ne pas oublier les updates en cas de non rechargement automatique de ton tableau.

Bon courage.

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 :

modifiera l'aspect du bouton dans la table (oui<-->non)
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:

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:

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

On peut alors écrire (par exemple) :

Code:

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

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

06/09/2018, 19h38
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 :D :D Coool :king:

En tout cas j'ai des éléments. Merci beaucoup. C'est toujours un plaisir de poster sur ce forum.
06/09/2018, 19h53
psychadelic

Citation:

Envoyé par sebastien85000

@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

Citation:

click sur tableau avec sql

:

Citation:

Envoyé par psychadelic

changer les valeurs dans l'affichage ne pourra jamais les changer dans ta table SQL... :roll:
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.
07/09/2018, 18h06
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
13/09/2018, 12h38
johnlobs

Bonjour,

Citation:

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.

Citation:

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,