jQuery: cuenta el número de filas en una tabla

491

¿Cómo cuento el número de elementos tr dentro de una tabla usando jQuery?

Sé que hay una pregunta similar , pero solo quiero las filas totales.

Comunidad
fuente

Respuestas:

955

Use un selector que seleccionará todas las filas y tomará la longitud.

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

Nota: ¡este enfoque también cuenta todos los trs de cada tabla anidada!

tvanfosson
fuente
11
$ ('# myTable tr'). size () devolverá el mismo valor.
Garry Shutler
31
@Garry: los documentos indican que se prefiere la longitud sobre el tamaño () porque es más rápido.
tvanfosson
12
.size () llama .length internamente
redsquare
2
Tiene una propiedad de longitud porque es una matriz. No sé lo suficiente de la historia de jQuery para saber si el objeto jQuery siempre extendió una matriz.
tvanfosson
67
Esto también contará tr en el thead ... $ ('# myTable tbody tr'). Length; contará aquellos solo en los cuerpos de las mesas ...
Dave Lawrence
178

Si usa <tbody>o <tfoot>en su tabla, tendrá que usar la siguiente sintaxis o obtendrá un valor incorrecto:

var rowCount = $('#myTable >tbody >tr').length;
James Moberg
fuente
1
Estoy usando <tbody> pero obtengo el mismo valor
Kreker
1
use $ ('# myTable> tbody: last> tr'). length;
Riccardo Bassilichi
77
@DevlshOne Eso no es cierto, la longitud no es cero base, consulte la documentación: api.jquery.com/length
Mike
1
Cuando haya anidado tablas, esto solo contará las filas en la tabla especificada, que es lo que necesitaba.
GilShalit
1
@ user12379095 Algo como esto: stackoverflow.com/questions/32101764/…
AntonChanning
49

Alternativamente...

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

jsFiddle DEMO

Esto garantizará que las filas de tabla anidadas no se cuenten también.

DevlshOne
fuente
Oh, porque entonces el índice devuelve -1. Inteligente.
Samuel Edwin Ward,
1
Gracias. Son pocos y distantes entre sí, pero las soluciones inteligentes se escapan de vez en cuando.
DevlshOne
var rowCount = $('table#myTable tr:last').index() + 1;
Ouadie
Ignora <thead>filas y filas de tablas anidadas. Agradable. jsfiddle.net/6v67a/1576
GreeKatrina
¡Si Last <td>tiene una tabla interna, devuelve el recuento de filas de esa tabla! jsfiddle.net/6v67a/1678
Shaunak Shukla
32

Bueno, obtengo las filas attr de la tabla y obtengo la longitud de esa colección:

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

Creo que jQuery funciona menos.

jjroman
fuente
2
+1 - Bueno para el escenario en el que se le pasa un elemento que contiene una tabla, por ejemplo, var rowCount = $ (element) .attr ('rows'). Length;
Nicholas Murray
99
Usando JQuery v1.9.0 y debo usar prop () para acceder a 'rows': $ ("# myTable"). Prop ('rows'). Length; (Chromium 24)
nvcnvn
16

Aquí está mi opinión al respecto:

//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
fuente
Muy buena función @Ricky G, útil para hacer varias cosas, por ejemplo, esta función se puede llamar para html generado desde el backend en lugar de dom también. Gracias
Dhaval del
12

Tengo lo siguiente:

jQuery('#tableId').find('tr').index();
chifliiiii
fuente
3
más 1 para obtener el número de filas
Olivier
8

prueba este si hay tbody

Sin encabezado

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

Si hay encabezado entonces

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

¡¡¡Disfrutar!!!

BornToCode
fuente
1
Falta () después de chidlren => $ ("# myTable> tbody").
Children
1
El encabezado debe estar encerrado en lo <thead>que debe venir antes <tbody>. Por lo tanto, el -1 no debería ser necesario, si la tabla está diseñada adecuadamente de acuerdo con el estándar.
ilpelle
problema es que cuando tabla de datos no tiene ningún registro que muestra la longitud como 1, debido tabla de datos rinden una fila vacía con clase "extraño" en la tabla de datos .....
Syed Ali
Tengo una tabla dinámica en un UserScript y esta fue la única solución que funcionó
brasofilo
7

Necesitaba una forma de hacer esto en un retorno de AJAX, así que escribí esta pieza:

<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 es un ejemplo rápido, pero puede ser útil.

dennismonsewicz
fuente
6

Encontré que esto funciona muy bien si desea contar filas sin contar el th y las filas de las tablas dentro de las tablas:

var rowCount = $("#tableData > tbody").children().length;
Zoe
fuente
¿Cómo modificarlo para contar columnas?
ePandit
3
row_count =  $('#my_table').find('tr').length;
column_count =  $('#my_table').find('td').length / row_count;
Cibernético
fuente
1

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

sivaprakash
fuente