96

テーブルの各列の詳細を抽出する必要があります。たとえば、列「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>
4

10 に答える 10

290

演習の目的は、情報を含む行を見つけることです。そこに着くと、必要な情報を簡単に抽出できます。

答え

$(".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()-一致した要素のセット内の各要素の直前の兄弟を取得します
于 2014-05-11T10:05:16.060 に答える
13

クリックされたボタンに関連する行を見つけるには、コードを変更する必要があります。これを試して：

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

フィドルの例

于 2013-01-22T14:09:23.880 に答える
12

これを試して：

$(".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されます。値を使用して文字列/配列を作成することをお勧めします。

ここの例

ここで配列の例を使用して完全なアドレスを取得する

于 2013-01-22T14:09:06.237 に答える
4 
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()"
于 2013-01-22T14:18:48.593 に答える
3

セレクターは、選択されたテーブル要素内に".nr:first"クラスを持つ最初の要素と最初の要素のみを具体的に探します。"nr"代わりに呼び出す.find(".nr")と、クラスを持つテーブル内のすべての要素を取得します"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
    });
});
于 2013-01-22T14:14:07.677 に答える
0

jqueryを使用して行にidを持つ要素を検索します

$(document).ready(function () {
$("button").click(function() {
    //find content of different elements inside a row.
    var nameTxt = $(this).closest('tr').find('.name').text();
    var emailTxt = $(this).closest('tr').find('.email').text();
    //assign above variables text1,text2 values to other elements.
    $("#name").val( nameTxt );
    $("#email").val( emailTxt );
    });
});
于 2018-05-10T11:00:59.520 に答える
0 
var values = [];
var count = 0;
$("#tblName").on("click", "tbody tr", function (event) {
   $(this).find("td").each(function () {
       values[count] = $(this).text();
       count++;
    });
});

これで、values配列には、その行のすべてのセル値が含まれ、values[0]のように使用できます。クリックした行の最初のセル値

于 2018-07-28T07:15:41.697 に答える
0

デリゲートの簡単な例の完全なコードは次のとおりです

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">
  <h2>Striped Rows</h2>
  <p>The .table-striped class adds zebra-stripes to a table:</p>            
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>

      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
        <td>click</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
        <td>click</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
        <td>click</td>
      </tr>

    </tbody>
  </table>
  <script>
  $(document).ready(function(){
  $("div").delegate("table tbody tr td:nth-child(4)", "click", function(){
  var $row = $(this).closest("tr"),        // Finds the closest row <tr> 
    $tds = $row.find("td:nth-child(2)");
     $.each($tds, function() {
        console.log($(this).text());
        var x = $(this).text();
        alert(x);
    });
    });
});
  </script>
</div>

</body>
</html>
于 2018-08-16T18:48:31.133 に答える
0

次のコードをヘッダーセクションに配置します

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

本文のテーブルを次のように定義します

<table class="table table-hover">
            <tr>
                <th>Name/Nr.</th>
                <th>Street</th>
                <th>Town</th>
                <th>Postcode</th>
                <th>Country</th>
                <th>View</th>
            </tr>
            
            <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="btn grabId" >View</button></td>
            </tr>
            
</table>

次に、このスクリプトを使用します

<script>
    $(".grabId").click(function() {
        var $row = $(this).closest("tr");    // Find the row
        var $siteId = $row.find(".siteId").text(); // Find the text
        alert($siteId);
    });
</script>
于 2021-05-28T08:27:19.143 に答える
0

これを試してください。javascriptまたはjqueryを選択してください。ヘッダー列がない場合は、マイナス1を付けないでください。

function rowClicked(element){
    var rowJavascript = element.parentNode.parentNode;
    var rowjQuery = $(element).closest("tr");
    
    var rowIndexJavascript = rowJavascript.rowIndex-1;
    var rowIndexjQuery = rowjQuery[0].rowIndex-1;
    
    console.log("rowIndexJavascript : ",rowIndexJavascript);
    console.log("rowIndexjQuery : ",rowIndexjQuery);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Row ID</th>
<th>Button</th>
</tr>
<tr>
<td>0</td><td><button type="button"  onclick="rowClicked(this)">test1</button></td>
</tr>
<tr>
<td>1</td><td><button type="button" onclick="rowClicked(this)">test2</button></td>
</tr>
<tr>
<td>2</td><td><button type="button" onclick="rowClicked(this)">test3</button></td>
</tr>
</table>

于 2021-07-13T04:41:43.480 に答える