练习的目的是找到包含信息的行。当我们到达那里时，我们可以轻松地提取所需的信息。

回答

$(".use-address").click(function() {
    var $item = $(this).closest("tr")   // Finds the closest row <tr> 
                       .find(".nr")     // Gets a descendent with class="nr"
                       .text();         // Retrieves the text within <td>

    $("#resultas").append($item);       // Outputs the answer
});

查看演示

现在让我们集中讨论在这种情况下的一些常见问题。

如何找到最近的行？

使用.closest()：

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

使用.parent()：

您还可以使用.parent()方法向上移动 DOM 树。这只是有时与.prev()和一起使用的替代方法.next()。

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

获取所有表格单元格<td>值

所以我们有我们的$row，我们想输出表格单元格文本：

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

与前一个类似，但是我们可以指定子<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() - 获取匹配元素集中每个元素的前一个兄弟元素

您需要更改代码以查找与单击的按钮相关的行。试试这个：

$(".use-address").click(function() {
    var id = $(this).closest("tr").find(".nr").text();
    $("#resultas").append(id);
});

示例小提琴

试试这个：

$(".use-address").click(function() {
   $(this).closest('tr').find('td').each(function() {
        var textval = $(this).text(); // this will be the text of each <td>
   });
});

这将找到最接近的tr（通过 DOM 向上）当前单击的按钮，然后循环每个按钮td- 您可能想要创建一个带有值的字符串/数组。

示例在这里

在此处使用数组示例获取完整地址

function useAdress () { 
var id = $("#choose-address-table").find(".nr:first").text();
alert (id);
$("#resultas").append(id); // Testing: append the contents of the td to a div
};

然后在你的按钮上：

onclick="useAdress()"

选择器".nr:first"专门寻找第一个，也是唯一一个"nr"在所选表格元素中具有类的元素。如果您改为调用，.find(".nr")您将获得表中具有 class 的所有元素"nr"。一旦你拥有了所有这些元素，你就可以使用.each方法来迭代它们。例如：

$(".use-address").click(function() {
    $("#choose-address-table").find(".nr").each(function(i, nrElt) {
        var id = nrElt.text();
        $("#resultas").append("<p>" + id + "</p>"); // Testing: append the contents of the td to a div
    });
});

但是，这将使您获得表格中的所有td.nr元素，而不仅仅是单击的行中的元素。要进一步将您的选择限制为包含单击按钮的行，请使用.closest方法，如下所示：

$(".use-address").click(function() {
    $(this).closest("tr").find(".nr").each(function(i, nrElt) {
        var id = nrElt.text();
        $("#resultas").append("<p>" + id + "</p>"); // Testing: append the contents of the td to a div
    });
});