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

**Killkala** · 24/08/2017, 11h33

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.

**SpaceFrog** · 24/08/2017, 11h38

Montre plutot le code source généré ...

mets un name ou un id à ton bouton .

il y a un form ?

tu utilises jquery ?

**Killkala** · 24/08/2017, 12h20

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

**SpaceFrog** · 24/08/2017, 14h31

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

Invité · 24/08/2017, 14h38

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>

**Killkala** · 24/08/2017, 14h47

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 !

**NoSmoking** · 29/08/2017, 19h06

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écupération de la valeur d'un <td> JS

JavaScript

Vue hybride

Discussions similaires

Partager

Partager