jQuery: parcours d'un tableau

Version imprimable

bonjour,

j'aurais besoin d'un coup de main pour le parcours du DOM sur un tableau.
Prenons un exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <table> <head> <tr> <th>col1</th> </tr> </head> <tr> <td>1</td> <td>2</td> <td><img class="affich2" src="..." alt="..."/></td> <td>4</td> <td><img class="click1" src="..." alt="..."/></td> </tr> </table>
En clickant sur l'image ayant la class click1 comment changer l'image dans la cellule du dessus (avec la classe affich2)?
J'ai essayé de plein de manières differentes depuis ce matin et j'obtiens aucun résultat.
Expl:
Code:

1 2 3 $(".click1").click(function(){ $(".affich2").parent().attr({ src: "images/valider.jpg", alt: "validee.jpg" }); });
Si quelqu'un pouvait m'aider à comprendre la manipulation du DOM ca m'aiderait beaucoup.

edit: La taille du tableau est variable donc un parcours "statique" n'est pas envisageable.

Bonjour,

Code:

1
2
3
4
5
 
$(".click1").click(function(){			
   $(".affich2").attr({ src: "images/valider.jpg", alt: "validee.jpg" });
   return false;	
});

Et comme cela?
A+

edit: tes cellules sont au même niveau !

25/08/2008, 15h13
noobC

J'avais déjà test ca (j'aurais dû le poster en exemple d'ailleur) et le problème s'est que ca me modifie toute les images qui possedent la class affich2.
Mon tableau d'exemple est un peu bidon c'est vrai.
En fait pour chaque ligne j'ai une image de validation sur la derniere colonne qui, lorsque l'on click dessus, change l'etat d'une autre image (toujours sur la même ligne mais une autre colonne).
Donc le code marche plus où moins car ca change toute les images de toutes les lignes au lieu de celle concerné seulement.

Je suis assez clair? :)

edit: ce que j'essaie de faire depuis ce matin c'est en fait d'associer la ligne courante (this) à l'image.
associer un this à cette ligne:

Code:

$(".affich2").attr({ src: "images/valider.jpg", alt: "validee.jpg" });

Re

Et avec cela:

Code:

1
2
3
4
5
6
7
 
$(document).ready(function(){
    $(".click1").click( function(){
       $(this).parent().siblings().children(".affich2").attr({src: "connect.png", alt: "Connecté"});
       return false;
    });
});

Pour le 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
 
<table>
  <head>
  	<tr>
  	<th>col1</th>
  	</tr>
  </head>
  <tr>
    <td>11</td>
    <td>12</td>
    <td><img class="affich2" src="disconnect.png" alt="Déconnecté"/></td>
    <td>14</td>
    <td><img  class="click1" src="phone.png" alt="Connexion"/></td>
  </tr>
  <tr>
    <td>21</td>
    <td>22</td>
    <td><img class="affich2" src="disconnect.png" alt="Déconnecté"/></td>
    <td>24</td>
    <td><img  class="click1" src="phone.png" alt="Connexion"/></td>
  </tr>
  <tr>
    <td>31</td>
    <td>32</td>
    <td><img class="affich2" src="disconnect.png" alt="Déconnecté"/></td>
    <td>34</td>
    <td><img  class="click1" src="phone.png" alt="Connexion"/></td>
  </tr>
</table>

A+

Rere::

Pour la bascule sur le click
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $(document).ready(function(){ $(".click1").click( function(){ if ($(this).parent().siblings().children(".affich2").attr("src") == "disconnect.png") { $(this).parent().siblings().children(".affich2").attr({src: "connect.png", alt: "Connecté"}); } else { $(this).parent().siblings().children(".affich2").attr({src: "disconnect.png", alt: "Déconnecté"}); } return false; }); });
En tassant:
Code:

1 2 3 4 5 6 7 $(document).ready(function(){ $(".click1").click( function(){ var myvar = $(this).parent().siblings().children(".affich2"); myvar.attr("src")=="disconnect.png"?myvar.attr({src:"connect.png",alt:"Connecté"}):myvar.attr({src:"disconnect.png",alt:"Déconnecté"}); }); });
A+

edit: à voir ICI avec icones de chez FamFamFam
edit 2: Les explications, c'est mieux!
On cherche le "parent" de l'élément cliqué (c'est le "td"), dans ce parent, on prend les frères "siblings" (les autres "td" de la même ligne). Et on prend l'élément de class = affich2 qui est le fils "children" d'un des frères !! Clair quoi :yaisse2:

25/08/2008, 17h17
noobC

Un grand merci à toi jlmag!
Franchement merci d'avoir pris le temps de coder un autre exemple, c'est vraiment :king:. La fonction siblings() qui me parlait pas du tout, je risquais pas de trouver de sitôt.
Sinon j'ai une dernière question, le

Code:

return false;

à la fin sert à quoi? (avec où sans ca change rien)
25/08/2008, 17h41
Invité

Re,

Logiquement, c'est pour éviter la propagation de l'évènement click sur les parents de l'élément cliqué me semble-t-il. Pas forcément utile dans ton cas.
Sinon, pour les fonctions de parcours du DOM, voir la doc ICI

A+