jQuery:为选定的单选按钮获取父tr


69

我有以下HTML:

<table id="MwDataList" class="data" width="100%" cellspacing="10px">
    ....

    <td class="centerText" style="height: 56px;">
        <input id="selectRadioButton" type="radio" name="selectRadioGroup">
    </td>

    ....
</table>

换句话说,我的表只有几行,最后一个单元格的每一行都有一个单选按钮。
如何获得所选单选按钮的行?

我试过的

function getSelectedRowGuid() {
    var row = $("#MwDataList > input:radio[@name=selectRadioGroup]:checked :parent tr");
    var guid = GetRowGuid(row);
    return guid;
}

但似乎此选择器不正确。

Answers:


174

尝试这个。

您不需要@在jQuery选择器中以属性名称作为前缀。使用closest()方法获取与选择器匹配的最接近的父元素。

$("#MwDataList input[name=selectRadioGroup]:checked").closest('tr');

您可以像这样简化您的方法

function getSelectedRowGuid() {
    return GetRowGuid(
      $("#MwDataList > input:radio[@name=selectRadioGroup]:checked :parent tr"));
}

closest() -获取与选择器匹配的第一个元素,从当前元素开始,一直到DOM树。

附带说明一下,元素的ID在页面上应该是唯一的,因此请尽量避免在标记中看到相同的单选按钮ID。如果您不打算使用ID,则只需将其从标记中删除即可。


1
击败我。这是mostest
Dave

59

回答

$("#MwDataList input[name=selectRadioGroup]:checked").closest('tr');

如何找到最接近的行?

使用.closest()

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

使用.parent()

检查此.parent()方法。这是另类的.prev().next()

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

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

查看演示


仅获取特定 <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>
});

查看演示


有用的方法

  • .closest() -获取与选择器匹配的第一个元素
  • .parent() -获取当前匹配元素集中每个元素的父元素
  • .parents() -获取当前匹配元素集中每个元素的祖先
  • .children() -获取匹配元素集中每个元素的子元素
  • .siblings() -获取匹配元素集中每个元素的同级
  • .find() -获取当前匹配元素集中每个元素的后代
  • .next() -获得匹配元素集中每个元素的紧随其后的同级
  • .prev() -获取匹配元素集中每个元素的前一个同级
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.