jQuery: hitung jumlah baris dalam sebuah tabel

491

Bagaimana cara menghitung jumlah elemen tr dalam tabel menggunakan jQuery?

Saya tahu ada pertanyaan serupa , tapi saya hanya ingin baris total.

Komunitas
sumber

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!

tvanfosson
sumber
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;
James Moberg
sumber
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.

DevlshOne
sumber
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.

jjroman
sumber
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();
Ricky G
sumber
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();
chifliiiii
sumber
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!!!

BornToCode
sumber
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.

dennismonsewicz
sumber
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;
Zoe
sumber
Bagaimana memodifikasinya untuk menghitung kolom?
ePandit
3
row_count =  $('#my_table').find('tr').length;
column_count =  $('#my_table').find('td').length / row_count;
Berhubung dgn sibernetika
sumber
1

var trLength = jQuery('#tablebodyID >tr').length;

sivaprakash
sumber