jQuery: parcours d'un tableau

**noobC** · 25/08/2008, 14h51

bonjour,

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

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
 
<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Invité · 25/08/2008, 15h03

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**noobC** · 25/08/2008, 15h13

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Invité · 25/08/2008, 15h51

Re

Et avec cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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
 
<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+

Invité · 25/08/2008, 15h59

Rere::

Pour la bascule sur le click

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**noobC** · 25/08/2008, 17h17

Un grand merci à toi jlmag!
Franchement merci d'avoir pris le temps de coder un autre exemple, c'est vraiment

. 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

return false;

à la fin sert à quoi? (avec où sans ca change rien)

Invité · 25/08/2008, 17h41

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+

jQuery: parcours d'un tableau

jQuery

Discussions similaires

Partager

Partager