jQuery: conta o número de linhas em uma tabela

491

Como posso contar o número de elementos tr dentro de uma tabela usando o jQuery?

Eu sei que há uma pergunta semelhante , mas eu só quero o total de linhas.

Comunidade
fonte

Respostas:

955

Use um seletor que selecionará todas as linhas e terá o comprimento.

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

Nota: essa abordagem também conta todos os trs de todas as tabelas aninhadas!

tvanfosson
fonte
11
$ ('# myTable tr'). size () retornará o mesmo valor.
21730 Garry Shutler
31
@Garry - os documentos indicam que o tamanho é preferível ao tamanho () porque é mais rápido.
Tvanfosson 19/07/2009
12
.size () chama .length internamente
redsquare
2
Tem uma propriedade length porque é uma matriz. Não conheço o suficiente do histórico do jQuery para saber se o objeto jQuery sempre estendeu uma matriz.
Tvanfosson 19/11/2009
67
Isso também contará tr no cabeçalho ... $ ('# myTable tbody tr'). Length; vai contar aqueles apenas em corpos de mesa ..
Dave Lawrence
178

Se você usar <tbody>ou <tfoot>em sua tabela, precisará usar a seguinte sintaxe ou obter um valor incorreto:

var rowCount = $('#myTable >tbody >tr').length;
James Moberg
fonte
1
Eu estou usando <tbody>, mas eu recebo o mesmo valor
Kreker
1
use $ ('# myTable> tbody: last> tr'). length;
Riccardo Bassilichi
7
@DevlshOne Isso não é verdade, o comprimento não é de base zero, verifique a documentação: api.jquery.com/length
Mike
1
Quando você aninha tabelas, isso conta apenas as linhas na tabela especificada, que é o que eu precisava.
GilShalit
1
@ user12379095 Algo assim: stackoverflow.com/questions/32101764/…
AntonChanning
49

Alternativamente...

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

jsFiddle DEMO

Isso garantirá que quaisquer linhas de tabela aninhadas também não sejam contadas.

DevlshOne
fonte
Ah, porque o índice retorna -1. Inteligente.
Samuel Edwin Ward
1
Obrigado. São poucos e distantes entre si, mas soluções inteligentes desaparecem de vez em quando.
DevlshOne
var rowCount = $('table#myTable tr:last').index() + 1;
Ouadie
Ignora <thead>linhas e linhas da tabela aninhada. Agradável. jsfiddle.net/6v67a/1576
GreeKatrina
Se Last <td>tiver tabela interna, ele retornará a contagem de linhas dessa tabela !! jsfiddle.net/6v67a/1678
Shaunak Shukla
32

Bem, eu recebo as linhas attr da tabela e obtenho o comprimento para essa coleção:

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

Eu acho que o jQuery funciona menos.

jjroman
fonte
2
+1 - Bom para o cenário em que você recebe um elemento que contém uma tabela, por exemplo, var rowCount = $ (elemento) .attr ('linhas'). Length;
Nicholas Murray
9
Usando o JQuery v1.9.0 e devo usar prop () para acessar 'linhas': $ ("# myTable"). Prop ('linhas'). Length; (Chromium 24)
nvcnvn
16

Aqui está a minha opinião:

//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();
Ricky G
fonte
Very nice função @Ricky G, útil para fazer várias coisas exemplo esta função pode ser chamado para html gerado a partir de backend em vez de dom bem .. Obrigado
Dhaval dave
12

Eu tenho o seguinte:

jQuery('#tableId').find('tr').index();
chifliiiii
fonte
3
mais 1 para obter o número de linhas
Olivier
8

tente este se houver tbody

Sem cabeçalho

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

Se houver cabeçalho, então

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

Aproveitar!!!

BornToCode
fonte
1
Está faltando () após chidlren => $ ("# myTable> tbody"). Children (). Length
DrB 28/02/16
1
O cabeçalho deve estar dentro do <thead>qual deve vir antes <tbody>. Portanto, o -1 não deve ser necessário, se a tabela for projetada corretamente de acordo com o padrão.
ilpelle
problema é que quando tabela de dados não tem registro mostra o comprimento como 1, porque datatable tornar uma linha vazia com classe "estranho" na tabela de dados .....
Syed Ali
Eu tenho uma tabela dinâmica em uma UserScript e esta foi a única solução que funcionou
brasofilo
7

Eu precisava de uma maneira de fazer isso em um retorno AJAX, então escrevi este artigo:

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

Obviamente, este é um exemplo rápido, mas pode ser útil.

dennismonsewicz
fonte
6

Achei que isso funcionaria muito bem se você quiser contar linhas sem contar a th e nenhuma linha das tabelas dentro das tabelas:

var rowCount = $("#tableData > tbody").children().length;
Zoe
fonte
Como modificá-lo para contar colunas?
ePandit
3
row_count =  $('#my_table').find('tr').length;
column_count =  $('#my_table').find('td').length / row_count;
Cibernético
fonte
1

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

sivaprakash
fonte