jQuery: conta il numero di righe in una tabella


491

Come contare il numero di elementi tr all'interno di una tabella usando jQuery?

So che c'è una domanda simile , ma voglio solo le righe totali.

Risposte:


955

Utilizzare un selettore che selezionerà tutte le righe e prenderà la lunghezza.

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

Nota: questo approccio conta anche tutte le tr di ogni tabella nidificata!


11
$ ('# myTable tr'). size () restituirà lo stesso valore.
Garry Shutler,

31
@Garry: i documenti indicano che la lunghezza è preferita rispetto alle dimensioni () perché è più veloce.
tvanfosson,

12
.size () chiama .length internamente
redsquare il

2
Ha una proprietà length perché è un array. Non conosco abbastanza della storia di jQuery per sapere se l'oggetto jQuery ha sempre esteso un array.
tvanfosson,

67
Questo conterà anche tr nel thead ... $ ('# myTable tbody tr'). Length; conterà quelli solo nei corpi dei tavoli.
Dave Lawrence,

178

Se usi <tbody>o <tfoot>nella tua tabella, dovrai usare la sintassi seguente o otterrai un valore errato:

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

1
Sto usando <tbody> ma ottengo lo stesso valore
Kreker

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

7
@DevlshOne Questo non è vero, la lunghezza non è zero base, controlla la documentazione: api.jquery.com/length
Mike

1
Quando hai tabelle nidificate, questo conterà solo le righe nella tabella specificata, che è ciò di cui avevo bisogno.
GilShalit,

1
@ user12379095 Qualcosa di simile a questo: stackoverflow.com/questions/32101764/...
AntonChanning

49

In alternativa ...

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

jsFiddle DEMO

Ciò garantirà che anche le righe di tabella nidificate non vengano conteggiate.


Oh, perché l'indice restituisce -1. Intelligente.
Samuel Edwin Ward,

1
Grazie. Sono pochi e lontani tra loro ma soluzioni intelligenti escono di tanto in tanto.
DevlshOne

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

Ignora le <thead>righe e le righe della tabella nidificate. Bello. jsfiddle.net/6v67a/1576
GreeKatrina,

Se Last <td>ha una tabella interna, restituisce il conteggio delle righe di quella tabella !!jsfiddle.net/6v67a/1678
Shaunak Shukla

32

Bene, ottengo le righe attr dalla tabella e ottengo la lunghezza per quella raccolta:

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

Penso che jQuery funzioni di meno.


2
+1 - Buono per lo scenario in cui viene passato l'elemento che contiene una tabella, ad esempio var rowCount = $ (element) .attr ('righe'). Length;
Nicholas Murray,

9
Utilizzando JQuery v1.9.0 e I devo usare prop () per accedere a 'file': $ ("# myTable"). Prop ('file'). Lunghezza; (Chromium 24)
nvcnvn,

16

Ecco la mia opinione su di esso:

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

USO:

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

Funzione molto bella @Ricky G, utile per fare diverse cose esempio questa funzione può essere chiamata per html generato dal backend invece che dal dom .. Grazie
Dhaval dave

12

Ho ottenuto il seguente:

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

3
più 1 per ottenere il numero di righe
Olivier

8

prova questo se c'è il corpo

Senza intestazione

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

Se c'è un'intestazione allora

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

Godere!!!


1
Manca () dopo chidlren => $ ("# myTable> tbody"). Children (). Lunghezza
DrB

1
L'intestazione dovrebbe essere racchiusa in <thead>cui dovrebbe venire prima <tbody>. Quindi il -1 non dovrebbe essere necessario, se la tabella è stata progettata correttamente secondo lo standard.
ilpelle,

il problema è che quando datatable non ha record mostra lunghezza come 1, perché datatable rende una riga vuota con classe "dispari" in datatable .....
Syed Ali

Ho una tabella dinamica su UserScript e questa è stata l'unica soluzione che ha funzionato
brasofilo il

7

Avevo bisogno di un modo per farlo in un ritorno AJAX, quindi ho scritto questo pezzo:

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

Ovviamente questo è un rapido esempio, ma può essere utile.


6

Ho trovato che funziona davvero bene se vuoi contare le righe senza contare le th e le righe dalle tabelle all'interno delle tabelle:

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

Come modificarlo per contare le colonne?
ePandit,

3
row_count =  $('#my_table').find('tr').length;
column_count =  $('#my_table').find('td').length / row_count;

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.