質問

テーブルの各カラムの詳細を抽出する必要があります。例えば、列の"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>

どのように解決するのですか？

この演習の目的は、情報が含まれている行を見つけることです。そこに到達すると、必要な情報を簡単に抽出することができます。

回答

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

また、DOM ツリーを上に移動するには .parent() メソッドを使うこともできます。これは単なる代替手段であり、時には .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() - マッチした要素のセット内の各要素の直前の兄弟を取得します。