Get the contents of a table row with a button click(通过单击按钮获取表格行的内容)

本文介绍了通过单击按钮获取表格行的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要提取表中每一列的详细信息.例如，列姓名/编号".

I need to extract the details of each column in my table. For example, column "Name/Nr.".

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

问题:我的代码只选择第一个 <td> 类 nr.我如何让它发挥作用?

Problem: My code only picks up the first <td> that has a class nr. How do I get this to work?

这里是 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>

推荐答案

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

The object of the exercise is to find the row that contains the information. When we get there, we can easily extract the required information.

$(".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
});

查看演示

现在让我们关注在这种情况下的一些常见问题.

Now let's focus on some frequently asked questions in such situations.

使用 .closest():

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

使用 .parent():

您还可以使用 .parent() 方法.这只是有时与 .prev() 和 .next() 一起使用的替代方法.

You can also move up the DOM tree using .parent() method. This is just an alternative that is sometimes used together with .prev() and .next().

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

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

所以我们有我们的 $row 并且我们想输出表格单元格文本:

Getting all table cell `<td>` values

So we have our $row and we would like to output table cell text:

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> 元素的索引.

Similar to the previous one, however we can specify the index of the child <td> element.

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>
});

查看演示