IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Récupération de la valeur d'un <td> JS


Sujet :

JavaScript

  1. #1
    Inactif  
    Femme Profil pro
    Étudiant
    Inscrit en
    Août 2017
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Août 2017
    Messages : 16
    Par défaut Récupération de la valeur d'un <td> JS
    Bonjour,

    Je sais que ce problème à été posté de nombreuse fois (j'ai vu beaucoup de discussions de forum qui en traitait!), mais dans mon cas particulier je ne trouve pas de solution.
    En faite, j'ai un tableau dans ma page HTML (se tableau affiche mes lignes d'une BD) et je voudrai récupérer la dernière colones de mon tableau (l'id) car j'en ai besoin dans mon code ! mais la, le problème c'est lorsque je clique sur mon id quand la page Html s'affiche, je ne rentre même pas dans mon JavaScript (comme vous pouvez le voir, j'ai mis un "Test" à afficher dans la console lors du clique sur le td)
    Du coup il y a peut être un paramètre que j'ai mal écrit ou autre mais je n'ai toujours pas trouvé.
    (Le but final étant de récupérer l'id dans mon code pour pouvoir ensuite supprimé la ligne dans ma base de données depuis mon code Java)
    Voici mon code complet :

    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
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <!DOCTYPE html>
    <html>
        <head>
            <c:import url="/WEB-INF/includePart/header.jsp">
        		<c:param name="title" value="Chantiers"></c:param>
        	</c:import>
        	<link href="<c:url value="/css/form.css" />" rel="stylesheet">
        </head>
     
        <body>
        	<div class="menuPerso">
        		<c:import url="/WEB-INF/includePart/menu.jsp"></c:import>
        	</div>
            <form class="form-signin" method="post" action="<c:url value="/displayChantier" />">
     
                    <h2 class="form-signin-heading">Chantiers</h2>
     
    				<label for="chantier_name" class="sr-only">Liste des chantiers</label>
    				<br><br>
     
      				<table style="width:100%">
    					<tr>
    						<th>Nom</th>
    					    <th>Adresse</th> 
    					    <th>Ville</th>
    					    <th>Code Postal</th>
    					    <th>Modifier</th>
    					    <th>Supprimer</th>
    	 				</tr>
                    	<c:forEach items="${arrayChantier}" var="chantier">
     
    					<tr id="${chantier['chantier_id']}">
     
                                                     <td><a href="<c:url value="/map" />"><c:out value="${chantier['chantier_name']}"/></a></td>
    						 <td><c:out value="${chantier['chantier_adress']}"/></td>
    				                 <td><c:out value="${chantier['city']}"/></td>
    				 		 <td><c:out value="${chantier['postcode']}"/></td>			
    						 <td><a href="<c:url value="/edit" />">Modifier</a></td>
    						 <td id="${chantier['chantier_id']}" onclick = "del(${chantier['chantier_id']})"><a href="<c:url value="/deleteChantier" />">Supprimer</a></td>					   
    					</tr> 
     
    					</c:forEach>
    				</table>
            </form>
     
            <div class="footerPerso">
        		<c:import url="/WEB-INF/includePart/footer.jsp"/>
        	</div>
            <script>
    		function del(chantier_id){ 
                         console.log('test');
                        /*td = $("#"+chantier_id);*/ 
                        console.log(chantier_id); 
                     }
            </script>
        </body>
    </html>
    Ici un test que j'ai fais en incluant un bouton dans le td mais c'était encore pire, car sur ma page html, lorsque je clique sur le bouton, toute la liste était effacé (je n'ai pas compris pourquoi) mais encore une fois, rien dans la console

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <td> <button onclick = "del(${chantier['chantier_id']})" type="submit" value="${chantier['chantier_id']}">Supprimer</button></td>
    Merci d'avance
    Et désolé si ce post à déjà été traité, mais après de nombreuses recherches et de nombreux tests, je n'ai rien trouvé de fonctionnel et je dois essayé d'avancer le plus rapidement dans mon projet.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Montre plutot le code source généré ...

    mets un name ou un id à ton bouton .

    il y a un form ?

    tu utilises jquery ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Inactif  
    Femme Profil pro
    Étudiant
    Inscrit en
    Août 2017
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Août 2017
    Messages : 16
    Par défaut
    Le problème c'est que c'est un très gros projet donc pour montrer le code source ça deviens plus compliqué mais normalement le code source n’interagit pas de ce cas ?
    Car lorsque je clique sur mon href, cela devrai m'afficher "test" dans ma console et ça n'est pas le cas ici (pour but d'arriver à afficher l'id dans ma console bien-sur pour ensuite le récupérer)
    Mais j'ai l'impression que cela viens de mon onClick qui serai faux (pourtant chantier['chantier_id'] est valide car si je veux j'arrive à afficher l'id de chaque ligne dans ma page html)

    J'ai mis le bouton pour dire que j'avais fais le test, mais dans l'idée je préférerai garder cette ligne la (si ce n'est pas possible je passerai par un bouton bien entendu) :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <td id="${chantier['chantier_id']}" onclick = "del(${chantier['chantier_id']})"><a href="<c:url value="/deleteChantier" />">Supprimer</a></td>
    (Si à la place de "Supprimer" j'écris <c:out value="${chantier['chantier_id']}"/> mon ID s'affiche bien sur ma page html , vraiment la le soucis c'est de pouvoir le récupérer lors du clique de ma souris sur mon href)
    Du coup j'ai bien un id à mon td ici

    Oui il y a un form pour pouvoir ajouter un élément mais je ne pense pas que celui ci soit important dans ce cas, surtout que l'id je ne le rentre pas, il est auto-incrémenté à chaque nouvelle ligne de ma BD

    Pour ce qui est du JQuery, comme j'ai fais de nombreux test j'ai essayé de l'utiliser mais cela n'a pas été concluant non plus, mais si vous avez une solution en JQuery cela ne me dérange pas car il faut simplement que je rajoute cette ligne au début de mon code :
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    ou bien d'inclure je fichier jQuery.js
    ce qui n'est pas très compliqué non plus

    Merci d'avance pour ton aide,
    Désolé des erreurs de débutant que je peux faire !

    PS: en faite je crois que je me suis bien emmêler les pinceaux entre JavaScript et JQuery
    J'ai peut-etre la solution ! Si je trouve je la posterai

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    gros projet ou pas je ne vois pas ce qui t'empêche de nous montrer le code généré pour une ligne ...


    accessoirement un td n'a pas de value ... au mieux un innerHTML
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    TEST simple :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
       <td onclick="del_ligne(123)">Supprimer 123</td>
     
       <td><a onclick="del_ligne(456)">Supprimer 456</a></td>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function del_ligne(chantier_id) {
      alert(chantier_id);
      return false;
    }
    • 123 ne fonctionne pas
    • 456 fonctionne

    Donc, éviter onclick sur un td.

    Dans ton cas, le plus simple et "basique" :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <td><a href="" onclick="del(${chantier['chantier_id']});return false;">Supprimer</a></td>

  6. #6
    Inactif  
    Femme Profil pro
    Étudiant
    Inscrit en
    Août 2017
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Août 2017
    Messages : 16
    Par défaut
    Ah mais oui ! Génial !
    En effet un onclick sur un td n'est pas du tout la bonne solution !

    Cela fonctionne au top !
    Merci !

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 210
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 210
    Par défaut
    Bonjour,
    aucune raison que la ligne suivante ne fonctionne pas, sauf si il y a erreur dans la partie script de la page
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <td onclick="del_ligne(123)">Supprimer 123</td>
    L'ajout d'un élément « neutre » pour collecter le click n'est pas nécessaire, mais il existe une meilleur façon de faire, à mon sens, celle de mettre l'écouteur sur la <table> ou les <tr>, cela s’appelle la délégation, on évite ainsi de surcharger le code HTML.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 03/11/2005, 15h03
  2. récupération d'une valeur dans une variable
    Par jh0483 dans le forum MS SQL Server
    Réponses: 2
    Dernier message: 17/08/2005, 09h49
  3. Récupération de la valeur d'une auto-incrémentation
    Par maldufleur dans le forum MS SQL Server
    Réponses: 2
    Dernier message: 07/07/2005, 16h50
  4. Récupération de la valeur d'un champ au nom variable
    Par Oluha dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 10/02/2005, 15h13
  5. Récupération de la valeur visible d'une Liste déroulante
    Par Yaz dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 26/10/2004, 12h01

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo