web-dev-qa-db-fra.com

Comment trouver le parent tr de td dans une table en utilisant jquery?

Je travaille sur asp.net mvc 3. J'ai la structure suivante,

<tr data-uid="123">
<td>
<a href="#" id="click">Click Me</a>
</td>
</tr>

Maintenant, je veux trouver la valeur de l'attribut data-tag. J'ai essayé comme,

$("a#click").click(function(){
 var i= $(this).parent('td').parent('tr').data('uid');
});

mais ne fonctionne pas pour moi. Guidez-moi s'il-vous-plaît.

jqueryasp.net-mvc
10
Karthik Bammidi

Essaye ça

$("a#click").click(function(e){
    e.preventDefault();
    var i = $(this).closest('tr').attr('data-uid');
    console.log(i);
    var j = $(this).closest('tr').data('uid');
    console.log(j);
});​

e.preventDefault() est juste pour empêcher l'action par défaut .. Vous pouvez le supprimer si vous n'en avez pas besoin.

Assurez-vous également que votre tr est encadrée par des balises de table pour que cela fonctionne.

FIDDLE ICI

23
Sushanth --

Réponse

$("a#click").click(function(e){
    e.preventDefault();
    var i = $(this).closest('tr').attr('data-uid');
    console.log(i);
    var j = $(this).closest('tr').data('uid');
    console.log(j);
});

VIEW DEMO

Comment trouver la rangée la plus proche?

Utilisation de .closest():

var $row = $(this).closest("tr");

Utilisation de .parent():

Cochez cette méthode .parent() . Ceci est une alternative à .prev() et .next().

var $row = $(this).parent()             // Moves up from <button> to <td>
                  .parent();            // Moves up from <td> to <tr>

Obtenir toutes les cellules du tableau <td>

var $row = $(this).closest("tr"),       // Finds the closest row <tr> 
    $tds = $row.find("td");             // Finds all children <td> elements

$.each($tds, function() {               // Visits every single <td> element
    console.log($(this).text());        // Prints out the text within the <td>
});

VIEW DEMO

Obtenir uniquement des informations spécifiques <td>

var $row = $(this).closest("tr"),        // Finds the closest row <tr> 
    $tds = $row.find("td:nth-child(2)"); // Finds the 2nd <td> element

$.each($tds, function() {                // Visits every single <td> element
    console.log($(this).text());         // Prints out the text within the <td>
});

VIEW DEMO

Méthodes utiles

  • .closest() - récupère le premier élément qui correspond au sélecteur
  • .parent() - récupère le parent de chaque élément de l'ensemble actuel d'éléments correspondants
  • .parents() _ - récupère les ancêtres de chaque élément de l'ensemble actuel d'éléments correspondants
  • .children() - récupère les enfants de chaque élément dans l'ensemble d'éléments correspondants
  • .siblings() - récupère les frères et soeurs de chaque élément dans l'ensemble des éléments correspondants
  • .find() - récupère les descendants de chaque élément du jeu d'éléments correspondants
  • .next() _ - récupère le frère immédiatement suivant de chaque élément de l'ensemble des éléments correspondants
  • .prev() _ - récupère le frère immédiatement précédent de chaque élément de l'ensemble des éléments correspondants
11
Jay Patel

Utilisez ceci:

var i= $(this).parent('td').parent('tr').attr('data-uid');
0
Renan Cunha

Votre code devrait fonctionner tel quel, mais au lieu d'utiliser plusieurs fichiers .parent (), vous devriez utiliser les parents ('tr'). http://api.jquery.com/parents/

$(function() {
  $("a#click").click(function(){
    var i= $(this).parents('tr').data('uid');
  });​
});

DEMO: http://jsfiddle.net/mchambaud/G5jM8/1/

0
Michael

Avez-vous essayé .attr()?

$("a#click").click(function(){
    var i= $(this).parent('td').parent('tr').attr('data-uid');
    console.log( i );
});
0
Patrick Moore