Saya perlu mengekstrak detail setiap kolom di tabel saya. Misalnya kolom "Nama / Nr.".

• Tabel berisi sejumlah alamat
• Kolom paling akhir dari setiap baris memiliki tombol yang memungkinkan pengguna memilih alamat yang terdaftar.

Masalah: Kode saya hanya mengambil yang pertama <td>yang memiliki kelas nr. Bagaimana cara membuat ini bekerja?

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

Meja:

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

Tujuan dari latihan ini adalah untuk menemukan baris yang berisi informasi tersebut. Saat kami sampai di sana, kami dapat dengan mudah mengekstrak informasi yang diperlukan.

Menjawab

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

LIHAT DEMO

Sekarang mari kita fokus pada beberapa pertanyaan yang sering diajukan dalam situasi seperti itu.

Bagaimana menemukan baris terdekat?

Menggunakan .closest():

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

Menggunakan .parent():

Anda juga bisa naik pohon DOM menggunakan .parent()metode. Ini hanyalah alternatif yang terkadang digunakan bersama dengan .prev()dan .next().

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

Mendapatkan semua <td>nilai sel tabel

Jadi kami memiliki kami $rowdan kami ingin menampilkan teks sel tabel:

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

LIHAT DEMO

Mendapatkan <td>nilai tertentu

Mirip dengan yang sebelumnya, namun kita dapat menentukan indeks <td>elemen anak .

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

LIHAT DEMO

Metode yang berguna

• .closest() - dapatkan elemen pertama yang cocok dengan selektor
• .parent() - dapatkan induk dari setiap elemen dalam kumpulan elemen yang cocok saat ini
• .parents() - dapatkan leluhur setiap elemen dalam kumpulan elemen yang cocok saat ini
• .children() - dapatkan turunan dari setiap elemen dalam kumpulan elemen yang cocok
• .siblings() - dapatkan saudara dari setiap elemen dalam kumpulan elemen yang cocok
• .find() - dapatkan turunan dari setiap elemen dalam kumpulan elemen yang cocok saat ini
• .next() - dapatkan saudara langsung berikut dari setiap elemen dalam kumpulan elemen yang cocok
• .prev() - dapatkan saudara langsung sebelumnya dari setiap elemen dalam kumpulan elemen yang cocok

Coba ini:

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

Ini akan menemukan yang terdekat tr(naik melalui DOM) dari tombol yang saat ini diklik dan kemudian mengulang masing td- masing - Anda mungkin ingin membuat string / array dengan nilai.

Contoh di sini

Mendapatkan alamat lengkap menggunakan contoh array di sini

Anda perlu mengubah kode Anda untuk menemukan baris yang berhubungan dengan tombol yang diklik. Coba ini:

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

Contoh biola

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

lalu di tombol Anda:

onclick="useAdress()"

Selektor ".nr:first"secara khusus mencari elemen pertama dan satu-satunya yang memiliki kelas "nr"dalam elemen tabel yang dipilih. Jika Anda malah memanggil .find(".nr")Anda akan mendapatkan semua elemen dalam tabel yang memiliki kelas "nr". Setelah Anda memiliki semua elemen tersebut, Anda dapat menggunakan metode .each untuk mengulanginya. Sebagai contoh:

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

Namun, itu akan membuat Anda semua dari td.nrelemen dalam tabel, bukan hanya satu di baris yang diklik. Untuk lebih membatasi pilihan Anda ke baris yang berisi tombol yang diklik, gunakan metode .closest , seperti:

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

Temukan elemen dengan id berturut-turut menggunakan jquery

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

var values = [];
var count = 0;
$("#tblName").on("click", "tbody tr", function (event) {
   $(this).find("td").each(function () {
       values[count] = $(this).text();
       count++;
    });
});

Sekarang nilai array berisi semua nilai sel dari baris itu dapat digunakan seperti nilai [0] nilai sel pertama dari baris yang diklik

Berikut adalah kode lengkap untuk contoh sederhana delegasi

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