[JS]Cellule cliquable table <td>

Bonsoir j'envoie ce petit message pour vous demander un peu d'aide. Pour le contexte, je suis en train de travailler sur un captcha en image comme reCaptcha mais le souci c'est que j'ai une fonction clicked en javascript pour selectionner une cellule de mon tableau ce que j'aimerai faire c'est, au moment où un utilisateur va cliquer sur une cellule on va un effet de selection qui va etre enregistrer (surbrillance ou bien "enfoncement" de l'image) comme sur le captcha de Google en exemple

<div class="card border-0">
                        <table width="465" border="0" cellspacing="0" cellpadding="0" height="465" onclick="tes(event);">
                            <tr>
                              <td id="i1" class="i1" value="TOP-LEFT"></td>
                              <td id="i2" class="i2" value="TOP-CENTER"></td>
                              <td id="i3" class="i3" value="TOP-LEFT"></td>
                            </tr>
                            <tr>
                              <td id="i4" class="i4" value="CENTER-LEFT"></td>
                              <td id="i5" class="i5" value="CENTER-CENTER"></td>
                              <td id="i6" class="i6" value="CENTER-RIGHT"></td>
                            </tr>
                            <tr>
                              <td id="i7" class="i7" value="BOTTOM-LEFT"></td>
                              <td id="i8" class="i8" value="BOTTOM-CENTER"></td>
                              <td id="i9" class="i9" value="BOTTOM-RIGHT"></td>
                            </tr>
                        </table>
                    </div>

et le code petit code js cliquable :

function tes(event) {
            if (event.target.nodeName == "TD") {
                alert('TD got clicked');
            }
        }

Dois-je utiliser du jQuery ?

Merci d'avance

Bonsoir,

Pourquoi ? La base de ta fonction ... fonctionne. Il te faut remplacer le alert(); par ce que tu souhaite faire a/ou avec la TD cliquée.

par exemple, ajouté/enlevé des styles à chaque click via une class.

function tes(event) {
  if (event.target.nodeName == "TD") {
    event.target.classList.toggle("clicked");
  }
}

ensuite tu peut appliqué des style via

td.clicked {/* style */}

Cdt

Merci à toi pour ta réponse, alors en effet j'avais pas pensé au toggle cependant mais apres avoir fait cela et rajouté un style pour td.clicked rien ne se passe T_T je vais essayer de modifier mon css en attendant ta réponse
voila le css que j'ai fait :

table {margin:auto;border-collapse:collapse;cursor:pointer;}
            td.clicked {padding:15px 60px;border:1px solid #000; background: #444; !important}
            
            td:hover {background:#eee;}

Car ce que j’aimerais faire c’est envoyer les images sélectionnées en bases de données

Respectueusement,
Modifié par Kems (07 Apr 2021 - 15:04)

bonsoir,

Si les styles ne s'applique pas, c'est qu'il y a probablement un conflit avec ceux que tu as déjà. ( un vieux sujet qui en parle voir https://forum.alsacreations.com/topic-1-63161-1-poids-des-selecteurs.html ). https://jsfiddle.net/u1jr8kxv/ qui fonctionne seul.

Pour le coté BDD, je laisserais quelqu'un d'autre t'orienter sur AJAX , qui te permettra de dialoguer avec le serveur en lui envoyant les infos que tu veut sauvegarder .

Voici quand même un lien pour t'inspirer https://openclassrooms.com/forum/sujet/utilisation-de-ajax-sur-du-post

Cdt

D'accord je te remercie pour ton aide, avec quelque réglages cela fonctionne enfin. Ce qui me manque justement c'est de pourvoir recuperer les données que je veux pour pouvoir les envoyés dans ma base et comme tu l'as dit j'aurais besoin d'ajax.

Je vais regarder ce que tu m'as envoyé pour voir si je peux m'inspirer de ca pour faire une belle fonction en ajax qui va me permettre de recuperer ce que je veux

Bonne soirée à toi