Récupérer contenu d'un tableau

Version imprimable

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:

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:

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

17/12/2014, 18h08
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:
  
  alert ($(this).parent().prevAll('td').eq(-1).text());
- Soit tu attrapes l'ancêtre tr avec .closest('tr') ou .parents('tr')
  
  Code:
  
  alert ($(this).closest('tr').children('td').eq(1).text());
  
  Code:
  
  alert ($(this).parents('tr').children('td').eq(0).text());

Citation:

Envoyé par CosmoKnacki

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

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:

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:

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( ", " ) );
    });
 
});

18/12/2014, 15h42
StripMat

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

Sujet résolu !