单击按钮获取表格行的内容

Question

我需要提取表格中每列的详细信息.例如,列"Name/Nr.".

• 该表包含许多地址
• 每行的最后一列都有一个按钮,用户可以选择列出的地址.

问题:我的代码只选择了第一个<td>有类的代码nr.我如何让它工作？

这是jQuery位:

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

表:

<table id="choose-address-table" class="ui-widget ui-widget-content">
    <thead>
        <tr class="ui-widget-header ">
            <th>Name/Nr.</th>
            <th>Street</th>
            <th>Town</th>
            <th>Postcode</th>
            <th>Country</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="nr"><span>50</span>
            </td>
            <td>Some Street 1</td>
            <td>Leeds</td>
            <td>L0 0XX</td>
            <td>United Kingdom</td>
            <td>
                <button type="button" class="use-address" />
            </td>
        </tr>
        <tr>
            <td class="nr">49</td>
            <td>Some Street 2</td>
            <td>Lancaster</td>
            <td>L0 0XX</td>
            <td>United Kingdom</td>
            <td>
                <button type="button" class="use-address" />
            </td>
        </tr>
    </tbody>
</table>

Answer 1

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

回答

$(".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() - 获取匹配元素集中每个元素的前一个兄弟

Answer 2

您需要更改代码以找到相对于单击按钮的行.试试这个:

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

示例小提琴

Answer 3

试试这个:

$(".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- 您可能想要创建一个包含值的字符串/数组.

这里的例子

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