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.. Y'a t'il un moyen de le faire avec du CSS ou il est aussi possible de le faire en js ? je vous montre le code


<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 voici le petit code js :

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

Merci D'avance

8 réponses


tu peux ajouter une classe à ta cellule lorsque tu as cliqué dessus ?

function tes(event) {
    if (event.target.nodeName == "TD") {
        event.target.classList.add('selected');
    }
}
td.selected {
  box-shadow: inset 0 0 0 3px green;
}

Bonsoir, Merci de votre réponse. Au final c'est exactement ce que j'ai fait. ca fonctionne la sélectionne des cases se fait bien. Maintenant ce que j'aimerai maintenant pouvoir recuperer les valeurs de des cases selectionne pour les envoyés dans une bases de données avez vous une idée ? Dois-je utiliser ajax ? ou je dois utiliser un listener ?

Merci d'avance

le listener vous l'avez déjà. vous pouvez effectivement faire une requête ajax depuis votre fonction tes.

D'acoord je vais faire ca, et je reviendrai vers vous je vous remercie de vos réponses

D'acoord je vais faire ca, et je reviendrai vers vous je vous remercie de vos réponses

Up: J'ai essayer de regarder la doc d'Ajax() vu que je n'en ai jamais fait. Comment faire une requete à partir de la fonction tes pour recuperer l'id de l'image selectionner ?

ce que je voyais pour pouvoir le faire

var selected = document.querySelectorAll('td.clicked');
    sell = selected.id;

function envoi(){
    var selected = document.querySelector('#td.clicked')
    }
    $.ajax({
        url: 'traitement.php',
        type:'POST',
        data: (selected, 
        success: function(){
            alert('ok');
        }
    });
}

J'ai pensé à reférencer l''evenement td.clicked pour pouvoir l'envoyer mais j'ai l'impression que ce n'est pas ca et que je me complique la vie

Merci d'avance

tu peux créer un objet FormData pour contenir les valeurs que tu souhaites envoyer.

let formData = new FormData();
formData.append('id', selected.id);
fetch('traitement.php', {
  method: 'POST',
  body: formData
});

tu n'es pas obligé d'utiliser jQuery pour faire ta requête. Tous les navigateurs actuels le gèrent très bien en natif via fetch.
article de javascript.info sur fetch et formData

Hello , petite correction fetch n'est pas supporté par IE, si tu cible ce navigateur aussi il te faudra utiliser autre chose ou ajouter un polyfill pour IE.

Hello Merci deja pour vos reponse. Alors j'ai teste et fais les modifs qu'il y avait à faire pour que ca fonctionne pour mon code mais petit souci il me dise que selected n'est pas défini, pourquoi ce message d'erreur ?

Merci d'avance pour vos réponses

pourtant j'ai bien mis

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

                let formData = new FormData();
                formData.append('id', clicked.id);
                    fetch('../model/captchaModel.php', {
                        method: 'POST',
                        body: formData
                     });
                    //.then(console.log, console.error)
            }
        }