jQuery：获取所选单选按钮的父tr

Posted 2021-04-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery：获取所选单选按钮的父tr相关的知识，希望对你有一定的参考价值。

我有以下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;
}

但似乎这个选择器不正确。

答案

试试这个。

您不需要在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，则只需将其从标记中删除即可。

另一答案

回答

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

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