Comment parcourir tableau html avec jquery ?

Version imprimable

10/03/2015, 23h38
hamrouni wassim

1 pièce(s) jointe(s)

Comment parcourir tableau html avec jquery ?

salut, j'ai réussi à afficher les donnes stockée dans la base de données dans un tableau en utilisant jquery , pour chaque ligne j'ai un bouton "MAJ", je veux que lorsque je clique sur le bouton "MAJ" la ligne correspondante dans la table sera mise à jour , je sais qu'il faut utiliser les sélecteurs mais j'ai pas compris quels sont les sélecteurs qu'il faut les utilisés.
merci d'avance.

résultat de l'affichage :

Pièce jointe 171331
11/03/2015, 01h05
Watilin

Bonsoir,

un truc du genre $(this).closest("tr").children("td") appelé depuis la fonction .click que tu as attachée à tes boutons, ça devrait marcher. Au besoin rajoute :eq(x) dans le sélecteur (où x = 1, 2 ou 3) pour sélectionner les <td> au cas par cas.

Mais en connaissant la structure HTML du tableau, je pourrais mieux t'aider à trouver les bons sélecteurs à utiliser. Affiche la page dans Firefox, sélectionne tout le contenu du tableau et fais clic droit :arrow: « Code source de la sélection ». Dans le code source qui s'affiche, copie uniquement le code qui correspond au tableau (sans les éventuels trucs autour) et colle-le ici en utilisant la balise [code] du forum.
11/03/2015, 12h39
SpaceFrog

passe par les data- dans lequel tu mets l'id de la ligne
et récupères le sur le click de ton bouton de façon relative

as tu ce code html d'une ligne ?

merci , c'est le code html du tableau :

Code:

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
 out.println("<table id=tab border=1>");
          out.println("<tr>") ;
          out.println("<th>") ;            
          out.println("ID projet") ;
          out.println("</th>") ;
          out.println("<th>") ;    
          out.println("NOM projet") ;
          out.println("</th>") ;
          out.println("<th>") ;
          out.println("TYPE projet") ;
          out.println("</th>") ;
          out.println("<th>") ;
          out.println("MAJ") ;
          out.println("</th>") ;
          out.println("</tr>") ;
for (Projet p : projets) {
          out.println("<tr>") ;
          out.println("<td>");
          out.println (p.getId_p());
          out.println("</td>"); 
          out.println("<td>");
          out.println (p.getNom_p());
          out.println("</td>");
          out.println("<td>");
          out.println (p.getType_p());
          out.println("</td>");
          out.println("<td>");
          out.println ("<input type=button value=MAJ class=maj>");
          out.println("</td>");
          out.println("</tr>") ;  
 
       }
out.println("</table>");

11/03/2015, 19h49
Watilin

Tu as un début de code JavaScript ou pas du tout ?
11/03/2015, 21h42
hamrouni wassim
oui j'ai commencé par cette ligne :
Code:

1 2 $("#tab td:eq(3)").click(function(){ });
11/03/2015, 22h51
Watilin
Passe plutôt par les boutons, ce sera plus simple. En plus tu as mis une classe dessus.
Code:

1 2 3 4 $(".maj").click(function() { console.log($(this)); });
Teste avec la console de ton navigateur, tu verras s'afficher les boutons dedans à chaque fois que tu cliques.

Ensuite, relis mon premier message et normalement tu as tous les éléments pour y arriver ;)
12/03/2015, 00h01
hamrouni wassim
j'ai testé dans le console et j'ai eu les boutons, j'ai ajouté ton premier message mais pas de résultat , en premier temps je veux que lorsque je clique sur un bouton MAJ d'une ligne l'id correspondant s'afficherait.
Code:

1 2 3 $(".maj").click(function(){ alert( $(this).closest("tr").children("td")); });
12/03/2015, 00h27
Watilin
alert est inutile, il ne fera qu'afficher [Object object]. C'est pour ça que je te parlais de la console.

Ce code :
Code:

1 2 3 4 $(".maj").click(function() { console.log( $(this).closest("tr").children("td") ); });
fonctionne chez moi : il m'affiche les <td> correspondant à la ligne du bouton cliqué. S'il ne marche pas chez toi c'est peut-être parce qu'il ne s'exécute pas au bon moment. Est-ce que tu utilises $(document).ready() ?
12/03/2015, 08h21
SpaceFrog

Citation:

as tu ce code html d'une ligne ?

il m'avait semblé demander le code html ... pas le code serveur...

montre nous le code html d'un ligne .. d'un tr ...
click droit sur la page afficher source ... ou dans la console .