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