Discussion :

[StripMat]

Bonjour, j'ouvre cette discussion car je n'arrive pas à récupérer le contenu d'un tableau, j'ai ici des informations utilisateur que je souhaite comparer avec ma base de donnée.

Code html :

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

1
2
3
4
5
6
7
8
9
10
<table id='table'>
<tbody>
<tr>
<td>Text1</td><td>Text2</td><td>Text3</td><td><input type='button' id='1' onclick='Update()'></td>
</tr>
</tr>
<td>TextI</td><td>TextII</td><td>TextIII</td><td><input type='button' id='2'  onclick='Update()'></td>
</tr>
</tbody>
</table>

Je voudrai qu'au clic un des bouton, la fonction Update() récupère tous les 'Text' de la ligne correspondante.

J'ai éssayé des trucs comme sa :

Code :

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

1
2
3
4
5
alert($(this).parent("tr").eq(0).html());
alert($(this).parent("tr").eq(0).text());
alert($("#table").children("td").eq(0).text());
alert($("#table").children("td").eq(0).html());
alert($("#table").children("td")[1].eq(1).html());

Mais je n'affiche que des [object][Object] ou Undefined

How to do ?

PS: Y a t il un petit tools ou quelque chose pour m'aider à placer mes sélécteurs, en js ou jquery, j'perd un temps fou...

[CosmoKnacki]

Tu peux d'emblée éliminer les trois dernières propositions, comme aucune n'est relative à l'élément appelant (this). De plus le nœud table n'a pas d'enfants td, son seul nœud enfant est tbody.

Concernant les deux premières propositions, elles ne fonctionnent pas simplement parce que ta balise input n'a pas de nœud tr comme parent direct. (.parent() renvoie le parent direct soit le nœud td).

Tu as plusieurs possibilités:

• soit tu remontes d'un niveau avec .parent() pour chopper le nœud td et ensuite tu atteints les nœuds td précédents qui sont au même niveau.(Attention, ils sont classés du plus proche au plus éloigné)

  Code :

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

  alert ($(this).parent().prevAll('td').eq(-1).text());

• Soit tu attrapes l'ancêtre tr avec .closest('tr') ou .parents('tr')

  Code :

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

  alert ($(this).closest('tr').children('td').eq(1).text());

  Code :

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

  alert ($(this).parents('tr').children('td').eq(0).text());

[danielhagnoul]

[...] soit tu remontes d'un niveau avec .parent() pour chopper le nœud td et ensuite tu atteints les nœuds td précédents qui sont au même niveau.(Attention, ils sont classés du plus proche au plus éloigné)

Code :

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

alert ($(this).parent().prevAll('td').eq(-1).text());

[ ...]

Oui, avec l'inconvénient cité.

Les ID sont inutiles (une classe suffit), on ne doit pas récupérer le texte du TD contenant le bouton, et l'on devra certainement améliorer la présentation du résultat en passant par la méthode jQuery.each(). Exemple :

Code HTML :

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
<table id="table">
    <tbody>
        <tr>
            <td>Text1</td>
            <td>Text2</td>
            <td>Text3</td>
            <td>
                <button class="update">Mettre à jour</button>
            </td>
        </tr>
        </tr>
            <td>TextI</td>
            <td>TextII</td>
            <td>TextIII</td>
            <td>
                <button class="update">Mettre à jour</button>
            </td>
        </tr>
    </tbody>
</table>

Code JavaScript :

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
$( function(){ // forme abrégée de $(document).ready(function(){
 
    $( "#table > tbody" ).find( "button[class='update']" ).on( "click", function( event ){
        var jObTDParent = $( this ).parent(),
            jObjTRParent = $( this ).parents( "tr:first" ),
            jObjAutresTD = jObjTRParent.find( "td" ).not( jObTDParent ),
            tab = [];
 
        jObjAutresTD.each( function( i, item ){
            tab.push( $( item ).text() );
        });
 
        alert( tab.join( ", " ) );
    });
 
});

[StripMat]

Merci pour vos réponses, je pourrai essayer tout sa ce soir !

Sujet résolu !