jQuery 如何使用jquery在表中查找td的父tr？

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

提问by Karthik Bammidi

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

我正在研究 asp.net mvc 3。我有以下结构，

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

但对我不起作用。请指导我。

回答by Sushanth --

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

closest如果不想在每个级别爬行父级，您可以使用该方法获取查询的选择器的最近父级。

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

e.preventDefault()只是为了防止默认操作.. 如果您不需要它，您可以删除它。

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

还要确保您tr包含在表格标签内以使其工作。

FIDDLE HERE

在这里小提琴

回答by Jay Patel

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():

使用.closest()：

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

---

---

Using .parent():

使用.parent()：

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

检查这个.parent()方法。这是 a.prev()和 的替代方案.next()。

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

---

---

Get All Table Cell <td>

获取所有表格单元格 <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>

只获取特定的 <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

• .closest()- 获取与选择器匹配的第一个元素
• .parent()- 获取当前匹配元素集合中每个元素的父元素
• .parents()- 获取当前匹配元素集合中每个元素的祖先
• .children()- 获取匹配元素集中每个元素的子元素
• .siblings()- 获取匹配元素集中每个元素的兄弟
• .find()- 获取当前匹配元素集中每个元素的后代
• .next()- 获取匹配元素集中每个元素的紧随其后的兄弟元素
• .prev()- 获取匹配元素集中每个元素的前一个兄弟元素

回答by Michael

Your code should work as is but you could instead of using multiple .parent() you should use parents('tr'). http://api.jquery.com/parents/

您的代码应该按原样工作，但您可以使用parents('tr') 而不是使用多个.parent()。http://api.jquery.com/parents/

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

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

演示：http: //jsfiddle.net/mchambaud/G5jM8/1/

回答by Patrick Moore

Have you tried .attr()?

你试过.attr()吗？

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

回答by Renan Cunha

Use this:

用这个：

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