Bagaimana cara mendapatkan nilai sel tabel menggunakan jQuery?

213

Saya mencoba mencari cara untuk mendapatkan nilai sel tabel untuk setiap baris menggunakan jQuery.

Meja saya terlihat seperti ini:

<table id="mytable">
  <tr>
    <th>Customer Id</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
  <tr>
    <td>456</td>
    <td></td>
  </tr>
  <tr>
    <td>789</td>
    <td></td>
  </tr>
</table>

Saya pada dasarnya ingin mengulang tabel, dan mendapatkan nilai Customer Idkolom untuk setiap baris.

Dalam kode di bawah ini saya telah bekerja bahwa saya perlu melakukan ini untuk mendapatkan perulangan melalui setiap baris, tetapi saya tidak yakin bagaimana cara mendapatkan nilai sel pertama di baris.

$('#mytable tr').each(function() {
    var cutomerId = 
}

jquery

— Sean Taylor
sumber

4

Berikut tutorial lengkap dengan demo langsung tentang cara mendapatkan nilai sel TD nilai codepedia.info/jquery-get-table-cell-td-value-div

— Satinder singh

306

Jika Anda bisa, mungkin perlu menggunakan atribut kelas pada TD yang berisi ID pelanggan sehingga Anda dapat menulis:

$('#mytable tr').each(function() {
    var customerId = $(this).find(".customerIDCell").html();    
 });

Pada dasarnya ini sama dengan solusi lain (mungkin karena saya salin-tempel), tetapi memiliki keuntungan bahwa Anda tidak perlu mengubah struktur kode Anda jika Anda bergerak di sekitar kolom, atau bahkan memasukkan ID pelanggan ke dalam <span>, asalkan Anda tetap atribut kelas dengan itu.

Omong-omong, saya pikir Anda bisa melakukannya di satu pemilih:

$('#mytable .customerIDCell').each(function() {
  alert($(this).html());
});

Jika itu membuat segalanya lebih mudah.

— Jennifer
sumber

4

Saya akan mengatakan $ ('# mytable td.customerIDCell'). Masing-masing (function () {alert ($ (this) .html ());}); tapi +1

— Matt Briggs

:-) terima kasih - tetapi bagaimana jika Anda ingin memasukkannya ke dalam rentang (saya mungkin telah memformat rentang dalam jawaban saya dengan buruk!)

— Jennifer

2

Menggunakan kelas pada tr sangat membantu jika Anda memiliki <td> dalam <tfoot> (atau menggunakan <td> alih-alih <th>) dan tidak menginginkannya.

— Frank Luke

$ ('# mytable tr'). masing-masing (function () {var customerId = $ (this) .find (". customerIDCell"). html ();});

— Osama khodrog

tetapi jika saya ingin mendapatkan tr html juga maka apa yang bisa kita lakukan

— Pengembang

132

$('#mytable tr').each(function() {
    var customerId = $(this).find("td:first").html();    
});

Apa yang Anda lakukan adalah mengulangi semua trs dalam tabel, menemukan td pertama di tr saat ini dalam loop, dan mengekstrak html dalamnya.

Untuk memilih sel tertentu, Anda dapat merujuknya dengan indeks:

$('#mytable tr').each(function() {
    var customerId = $(this).find("td").eq(2).html();    
});

Dalam kode di atas, saya akan mengambil nilai dari baris ketiga (indeks berbasis nol, sehingga indeks sel pertama adalah 0)

Inilah cara Anda dapat melakukannya tanpa jQuery:

var table = document.getElementById('mytable'), 
    rows = table.getElementsByTagName('tr'),
    i, j, cells, customerId;

for (i = 0, j = rows.length; i < j; ++i) {
    cells = rows[i].getElementsByTagName('td');
    if (!cells.length) {
        continue;
    }
    customerId = cells[0].innerHTML;
}

— Andreas Grech
sumber

1

Terima kasih, ini lebih bermanfaat bagi saya karena saya tidak memiliki kontrol pada markup dokumen yang ingin saya parsing menggunakan jQuery. Jadi bisa menggunakan "td: first", "td: last", dll sangat membantu.

— atomic

1

eq (2) akan mendapatkan nilai kolom ketiga, bukan baris ketiga.

— live-love

Apa yang dimaksud dengan eq (2) dalam kode Anda? Maksud saya 2 adalah indeks yang td atau tr?

— TechnicalKalsa

@Singh Elemen pada indeks 2 dari tdkoleksi dikembalikan oleh find("td")fungsi.

— Andreas Grech

Saya suka opsi 2 dengan indeks sebagai ref, biola saya di sini

— HattrickNZ

18

pendekatan yang kurang jquerish:

$('#mytable tr').each(function() {
    if (!this.rowIndex) return; // skip first row
    var customerId = this.cells[0].innerHTML;
});

ini jelas dapat diubah untuk bekerja dengan sel yang bukan yang pertama.

— Jimmy
sumber

8

$('#mytable tr').each(function() {
  // need this to skip the first row
  if ($(this).find("td:first").length > 0) {
    var cutomerId = $(this).find("td:first").html();
  }
});

— Strelok
sumber

2

Tidak perlu melewati baris pertama, karena mengandung <th>, bukan <td>, sehingga data mereka tidak akan diekstraksi

— Andreas Grech

7

Coba ini,

$(document).ready(function(){
$(".items").delegate("tr.classname", "click", function(data){
            alert(data.target.innerHTML);//this will show the inner html
    alert($(this).find('td:eq(0)').html());//this will alert the value in the 1st column.
    });
});

— Nikhil Dinesh
sumber

1

dari elemen kedua, bukan yang pertama, eq mulai dari 0

— Claudiu Creanga

4

Tidakkah Anda menggunakan id untuk kolom itu? katakan itu:

    <table width="300" border="1">
          <tr>
            <td>first</td>
          </tr>
          <tr>
            <td>second</td>
          </tr> 
          <tr>
            <td>blah blah</td>
            <td>blah blah</td>
            <td id="result">Where the result should occur</td>
          </tr>
    </table>


<script type="text/javascript">
        $('#result').html("The result is....");
</script>

— MOH3n MOH
sumber

4

Ini bekerja

$(document).ready(function() {
    for (var row = 0; row < 3; row++) {
        for (var col = 0; col < 3; col++) {
            $("#tbl").children().children()[row].children[col].innerHTML = "H!";
        }
    }
});

— David
sumber

2

coba ini :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>

<script type="text/javascript"><!--

function getVal(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;

    alert(targ.innerHTML);
}

onload = function() {
    var t = document.getElementById("main").getElementsByTagName("td");
    for ( var i = 0; i < t.length; i++ )
        t[i].onclick = getVal;
}

</script>



<body>

<table id="main"><tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr><tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
</tr><tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
</tr></table>

</body>
</html>

— mohammad
sumber

2

$(document).ready(function() {
     var customerId
     $("#mytable td").click(function() {
     alert($(this).html());
     });
 });

— jithin
sumber

2

Contoh yang berfungsi: http://jsfiddle.net/0sgLbynd/

<table>
<tr>
    <td>0</td>
    <td class="ms-vb2">1</td>
    <td class="ms-vb2">2</td>
    <td class="ms-vb2">3</td>
    <td class="ms-vb2">4</td>
    <td class="ms-vb2">5</td>
    <td class="ms-vb2">6</td>
</tr>
</table>


$(document).ready(function () {
//alert("sss");
$("td").each(function () {
    //alert($(this).html());
    $(this).html("aaaaaaa");
});
});

— Gazmend Hoxha
sumber