Jquery et tableaux html

Bonjour,

J'ai un tableaux de ce type :

<table id="tab1">
<tr>
<td id="td1Chaine1">
<td id="td2Chaine1">
<td id="td3Chaine1">
</tr>
</table>

Lorsque je clique sur l'une des cellules du tableaux id="tab1", je souhaite parcourir toutes les cellules de ce même tableaux et modifier individuellement leur 'id'.

J'ai d'abord pensé à une fonction de ce type :

$('#tab1 td').click(function(){
$('#tab1 td').attr('id',$(this).attr('id').replace(new RegExp('(chaine1)$'),'chaine2'));
});

Donc en gros, pour chaque cellule, je prend son 'id' qui se termine toujours par 'chaine1' que je remplace par 'chaine2'.

Évidement cela ne fonctionne pas puisque ' $(this).attr('id')' correspond à l'id de la cellule cliqué et non pas à l'id de la cellule parcouru par jquery.

Je reste à disposition pour plus d'informations si je ne suis pas assez clair.

Salut,

En remontant à l'élément parent du td avec un

parent()

et parcourir les différentes cellules avec un

each()

tu pourrais réussir à faire ce que tu souhaites.

Merci pour ta réponse je ne connaissais pas each().

Cependant après un cassage de tête sans fin, je ne parviens toujours pas à récupérer les <td> les <td> enfants de mon <tr> parent. Quelqu'un pourrait il me guider svp?

Coucou,

$('#tab1 td').click(function(){   // Lorsque tu cliques sur un td

     // $(this).parents('tr')   signifie le <tr> parent du td sur lequel tu as cliqué
     // $(this).parents('tr).find('td')   Remonte jusqu'au parent tr, et redescend jusqu'à un autre enfant td

    // Par exemple, si tu cliques sur le td "td2Chaine1", pour afficher l'id du td 'td3Chaine1'

    alert (  $(this).parents('tr').find('td').attr('id', 'td3Chaine1').val()  );

}); 

---------------------------------------------------------------------------------------
° En fait, pour trouver les enfants, tu peux utiliser .children(), lorsque tu cherches un enfant direct.
Exemple :

<tr> // Je suis là
             <td> // Je veux ça
                        Plop.
             </td> 
         <tr>

Il n'y a qu'un niveau d'héritage.
---------------------------------------------------------------------------------------
° Si tu as plusieurs niveaux d'héritage,
comme par exemple :

<table>  // Je suis là
                   <tr>
                           <td id='yosh'> // Je veux ça
                                      Plop
                           </td>
                   </tr>
         </table>

Il faut utiliser la fonction .find().
Dans le cas de mon exemple :

$(this).find('td').attr('id', 'yosh') // Récupère l'enfant (parmis tous les <td> de <table>, qui a l'id yosh

---------------------------------------------------------------------------------------
° Si tu veux l'élément directement après celui qui tu as sélectionné, tu utilises .next()
Exemple :

<td id='1'>  // Je suis là
<td id='2'> // Je veux ça

$(this).next('td') // Sélectionne le td suivant, après le td sur lequel tu te trouves

Modifié par Seyu (15 Feb 2012 - 17:21)

Merci Seyu pour ce mini cours !!! C'est exactement ce qu'il me fallait.
Je vous donne mon code pour ceux que ça intéresse :

$('#tab1 td').click(function(){
        $(this).parent('tr').children('td').each(function(){
                 this.id = this.id.replace(new RegExp('(Dsc)$'),'Asc'); // ex : id='id1Dsc' => id='id1Asc'
        });
});