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.