jQuery: hitung jumlah baris dalam sebuah tabel


Jawaban:


955

Gunakan pemilih yang akan memilih semua baris dan mengambil panjangnya.

var rowCount = $('#myTable tr').length;

Catatan: pendekatan ini juga menghitung semua tr dari setiap tabel bersarang!


11
$ ('# myTable tr'). size () akan mengembalikan nilai yang sama.
Garry Shutler

31
@ Garry - dokumen menunjukkan bahwa panjang lebih disukai daripada ukuran () karena lebih cepat.
tvanfosson

12
.size () memanggil .length internal
redsquare

2
Ini memiliki properti panjang karena array. Saya tidak cukup tahu tentang sejarah jQuery untuk mengetahui apakah objek jQuery selalu memperpanjang array.
tvanfosson

67
Ini juga akan menghitung tr di thead ... $ ('# myTable tbody tr'). Length; akan menghitung mereka hanya di badan meja ..
Dave Lawrence

178

Jika Anda menggunakan <tbody>atau <tfoot>di tabel Anda, Anda harus menggunakan sintaks berikut atau Anda akan mendapatkan nilai yang salah:

var rowCount = $('#myTable >tbody >tr').length;

1
Saya menggunakan <tbody> tetapi saya mendapatkan nilai yang sama
Kreker

1
gunakan $ ('# myTable> tbody: last> tr'). length;
Riccardo Bassilichi

7
@DevlshOne Itu tidak benar, panjangnya bukan nol, periksa dokumentasinya: api.jquery.com/length
Mike

1
Ketika Anda memiliki tabel bersarang, ini hanya akan menghitung baris dalam tabel yang ditentukan, yang saya butuhkan.
GilShalit

1
@ user12379095 Sesuatu seperti ini: stackoverflow.com/questions/32101764/…
AntonChanning

49

Kalau tidak...

var rowCount = $('table#myTable tr:last').index() + 1;

jsFiddle DEMO

Ini akan memastikan bahwa setiap baris tabel bersarang tidak juga dihitung.


Oh, karena kemudian indeks mengembalikan -1. Pintar.
Samuel Edwin Ward

1
Terima kasih. Mereka sedikit dan jauh di antara tetapi solusi pintar memang menyelinap keluar sekarang dan lagi.
DevlshOne

var rowCount = $('table#myTable tr:last').index() + 1;
Ouadie

Mengabaikan <thead>baris dan baris tabel bersarang. Bagus. jsfiddle.net/6v67a/1576
GreeKatrina

Jika Last <td>memiliki tabel bagian dalam, ia mengembalikan jumlah baris tabel itu !! jsfiddle.net/6v67a/1678
Shaunak Shukla

32

Yah, saya mendapatkan baris attr dari tabel dan mendapatkan panjang untuk koleksi itu:

$("#myTable").attr('rows').length;

Saya pikir jQuery bekerja lebih sedikit.


2
+1 - Baik untuk skenario di mana Anda melewati elemen yang berisi tabel misalnya var rowCount = $ (elemen) .attr ('rows'). Length;
Nicholas Murray

9
Menggunakan JQuery v1.9.0 dan saya harus menggunakan prop () untuk mengakses 'rows': $ ("# myTable"). Prop ('rows'). Length; (Chromium 24)
nvcnvn

16

Inilah pendapat saya:

//Helper function that gets a count of all the rows <TR> in a table body <TBODY>
$.fn.rowCount = function() {
    return $('tr', $(this).find('tbody')).length;
};

PEMAKAIAN:

var rowCount = $('#productTypesTable').rowCount();

Fungsi yang sangat bagus @ Rick G, berguna untuk melakukan beberapa hal contoh fungsi ini dapat dipanggil untuk html yang dihasilkan dari backend bukan dom juga .. Terima kasih
Dhaval dave

12

Saya mendapat yang berikut:

jQuery('#tableId').find('tr').index();

3
ditambah 1 untuk mendapatkan jumlah baris
Olivier

8

coba yang ini jika ada

Tanpa Header

$("#myTable > tbody").children.length

Jika ada tajuk maka

$("#myTable > tbody").children.length -1

Nikmati!!!


1
Tidak ada () setelah chidlren => $ ("# myTable> tbody"). Children (). Length
DrB

1
Header harus dilampirkan di <thead>mana harus datang sebelumnya <tbody>. Jadi -1 seharusnya tidak diperlukan, jika tabel dirancang dengan baik sesuai dengan standar.
ilpelle

Masalahnya adalah, ketika datatable tidak memiliki catatan itu menunjukkan panjang sebagai 1, karena datatable membuat baris kosong dengan kelas "aneh" di datatable .....
Syed Ali

Saya memiliki tabel dinamis pada UserScript dan ini adalah satu-satunya solusi yang berfungsi
brasofilo

7

Saya membutuhkan cara untuk melakukan ini dalam pengembalian AJAX, jadi saya menulis bagian ini:

<p id="num_results">Number of results: <span></span></p>

<div id="results"></div>

<script type="text/javascript">
$(function(){
    ajax();
})

//Function that makes Ajax call out to receive search results
var ajax = function() {
    //Setup Ajax
    $.ajax({
        url: '/path/to/url', //URL to load
        type: 'GET', //Type of Ajax call
        dataType: 'html', //Type of data to be expected on return
        success: function(data) { //Function that manipulates the returned AJAX'ed data
            $('#results').html(data); //Load the data into a HTML holder
            var $el = $('#results'); //jQuery Object that is holding the results
            setTimeout(function(){ //Custom callback function to count the number of results
                callBack($el);
            });
        }
    });
}

//Custom Callback function to return the number of results
var callBack = function(el) {
    var length = $('tr', $(el)).not('tr:first').length; //Count all TR DOM elements, except the first row (which contains the header information)
    $('#num_results span').text(length); //Write the counted results to the DOM
}
</script>

Jelas ini adalah contoh cepat, tetapi mungkin bermanfaat.


6

Saya menemukan ini berfungsi dengan sangat baik jika Anda ingin menghitung baris tanpa menghitung th dan setiap baris dari tabel di dalam tabel:

var rowCount = $("#tableData > tbody").children().length;

Bagaimana memodifikasinya untuk menghitung kolom?
ePandit


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.