web-dev-qa-db-fra.com

jQuery - Obtention de la valeur textuelle d'une cellule de tableau dans la même ligne qu'un élément cliqué

Je clique sur un lien dans une cellule de tableau. Je dois obtenir la valeur d'une cellule spécifique dans cette même ligne de tableau.

<tr>
    <td class="one">this</td>
    <td class="two">that</td>
    <td class="three">here</td>
    <td class="four"><a href="#">there</a></td>
</tr>
<tr>
    <td class="one">qwqw</td>
    <td class="two">dfgh</td>
    <td class="three">ui</td>
<td class="four"><a href="#">there</a></td>
</tr>

J'ai un gestionnaire de clic attaché au lien dans la quatrième cellule. Ce gestionnaire de clic appelle une fonction qui ouvre une fenêtre modale. Lorsqu'un formulaire du modal est soumis, je souhaite également transmettre la valeur de td class = "two" de la ligne dans laquelle le lien a été cliqué vers ce modal.

Voici la fonction qui envoie le modal (le problème est d'obtenir la valeur correcte pour var Something):

var Send = function() {
    var Name = $( '#name' ).val();
    var Something = $(this).closest('td').siblings('.two').text(); // version 1. doesn't work
    var Something = $(this).closest('tr').siblings('td.two').text(); // version 2 also doesn't work
    var Something = $(this).attr('class'); // version 3. just a test but also doesn't work
    $.ajax( {
        async: false,
        data: { name: Name, somedata: Something },
        type: 'POST',
        url: the url
    });        
};

Le problème est que je ne peux pas obtenir la valeur correcte pour Something. Ce devrait être la valeur de td class = two dans la même ligne que l'élément cliqué.

La façon dont tout cela se réunit est. Cliquez sur le lien cible, qui appelle une méthode appelée Send_Click (). Send_Click effectue des validations puis appelle Send () mais la valeur de Quelque chose n'est jamais renseignée. Est-ce parce que this n'est pas ce que je pense? Hjelp!

jqueryjquery-selectors
47
rg88

Vous voulez plutôt .children() ( documentation ici ):

$(this).closest('tr').children('td.two').text();
82
Nick Craver

Nick a la bonne réponse, mais je voulais ajouter que vous pourriez aussi obtenir les données de la cellule sans avoir besoin du nom de la classe.

var Something = $(this).closest('tr').find('td:eq(1)').text();

:eq(#) a un index de base zéro ( lien ).

63
Mottie

ça devrait marcher:

var Something = $(this).children("td:nth-child(n)").text();
5
hhhqsun

vous pouvez donc utiliser parent () pour atteindre le parent parent, puis utiliser find pour rassembler le td avec la classe deux

var Quelque chose = $ (this) .parent (). find (". two"). html ();

ou

var Quelque chose = $ (this) .parent (). parent (). find (". two"). html ();

utilise autant que parent () quelle que soit la profondeur de l'objet cliqué en fonction de la ligne tr

espérons que cela fonctionne ...

4
Yasin Ergul

Cela fonctionnera aussi

$(this).parent().parent().find('td').text()
4
Anna.P