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.

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!


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;

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.


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.


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

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

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


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.


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;

¿Cómo modificarlo para contar columnas?
ePandit

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.