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


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!


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;

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


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.


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.


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();

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();

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


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.


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;

Como modificá-lo para contar colunas?
ePandit

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.