How to find parent tr of td in a table using jquery?

Question

I am working on asp.net mvc 3. I have a following structure,

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

Now i want to find the tag data- attribute value. I have tried like,

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

but doesnt work for me. please guide me.

Answer 1

You can use the closest method to get the closest parent of the selector that is queried with if don't want to crawl up parent at each level.

$("#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() is just to prevent the default action.. You can remove that if you do not need it.

Also make sure your tr are enclosed inside table tags to make it work..

FIDDLE HERE

Answer 2

Answer

$("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

---

How to find the closest row?

Using .closest():

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

---

Using .parent():

Check this .parent() method. This is alternative of a .prev() and .next().

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

---

Get All Table Cell <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

---

Get Only Specific <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

---

Useful methods

• .closest() - get the first element that matches the selector
• .parent() - get the parent of each element in the current set of matched elements
• .parents() - get the ancestors of each element in the current set of matched elements
• .children() - get the children of each element in the set of matched elements
• .siblings() - get the siblings of each element in the set of matched elements
• .find() - get the descendants of each element in the current set of matched elements
• .next() - get the immediately following sibling of each element in the set of matched elements
• .prev() - get the immediately preceding sibling of each element in the set of matched elements