Dapatkan isi baris tabel dengan satu klik tombol

91

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>
javascript jquery button onclick html-table chuckfinley.dll
sumber
3
Berikut tutorial lengkap dengan demo langsung tentang cara mendapatkan nilai TD sel tabel codepedia.info/jquery-get-table-cell-td-value-div
Satinder singh

Jawaban:

265

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
martynas
sumber
Bagaimana jika saya memiliki popup dan saya ingin mengakses tabel dari halaman dan menghapus baris? Saya mencoba salah satu metode, tetapi tidak berhasil untuk saya: /
Si8
Bisakah Anda menyiapkan jsFiddle?
martynas
1
Di sini saya memiliki masalah serupa saat menangani nilai ID dinamis. Silakan lihat stackoverflow.com/questions/25772554/…
Sanjeev4evr
5
Entah bagaimana jawaban ini tidak lebih disukai. Kiat bagus! Hanya ingin menambahkan Anda selalu bisa mendapatkan nilai kolom seperti ini setelah mendapatkan baris tertentu $ (this) .closest ("tr"). Find ("td: eq (2)"). Html (); Anda akan mendapatkan kolom nomor 2. Bersulang!
Matias
1
Saya masih menggunakan jawaban ini dari waktu ke waktu. Sangat membantu dan dengan beberapa modifikasi kecil, pada dasarnya berfungsi dengan setiap tabel!
Mese
11

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

Pastori
sumber
10

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

Rory McCrossan
sumber
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
};

lalu di tombol Anda: 

onclick="useAdress()"
cody collicott
sumber
1
Itu memiliki masalah yang sama dengan kode dalam pertanyaan - itu selalu mendapatkan id dari baris pertama dalam tabel, terlepas dari tombol baris mana yang diklik.
dgvid
3

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
    });
});
dgvid
sumber
0

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 );
    });
});
Muhammad Bilal
sumber
0 
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

Muhammad Waqas Aziz
sumber
0

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>[email protected]</td>
        <td>click</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
        <td>click</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</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>
ankush
sumber