2

Hola estoy tratando de contar las filas de una tabla html y mostrarlas con un label pero no encuentro como hacerlo, encontre la forma de hacerlo con javaScript pero la funcion la llama por medio de un onclick así :

    <html>
    	<head>
    		<title>Ejercicio</title>
    	</head>
    	<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
    	<script>
    		function contarFilas() {
    			var $num = document.getElementById('tblUsuario').getElementsByTagName('tr').length - 1;
    			alert($num);
    		}
    	</script>
    	<body>
    		<table border="1" id="tblUsuario">
    			<tr>
    				<th>Nombre</th>
    				<th>Apellido</th>
    			</tr>
    			<tr>
    				<td>Hinata</td>
    				<td>Hyuga</td>
    			</tr>
    			<tr>
    				<td>Yuno</td>
    				<td>Gasai</td>
    			</tr>
    			<tr>
    				<td>Asuna</td>
    				<td>Yuuki</td>
    			</tr>
    		</table>
    		<input type="submit" value="Enviar" onclick="contarFilas()"/>
    	</body>
    </html>

Pero como digo no busco que me salga así la cantidad de filas, lo que busco es que me salga en un label arriba de la tabla. Como podria realizarlo?

Gracias.

1 respuesta 1

3

Si sólo tienes una tabla puedes contar los elementos tr, como en este ejemplo. Si hay más tablas o sólo quieres contar determinadas filas, puedes añadir diferentes clases a los tr y contar la cantidad de cada elemento, como he añadido en el segundo div.

$(document).ready(function() {
  var nrows = 0; var nres = 0;
     $("table tr").each(function() {
         nrows++;
     })
     $("#nrows").html(nrows);
     $(".isres").each(function() {
         nres++;
     })
     $("#nres").html(nres);
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nrows"></div>
<div id="nres"></div>
        <table border="1" id="tblUsuario">
            <tr>
                <th>Nombre</th>
                <th>Apellido</th>
            </tr>
            <tr class="isres">
                <td>Hinata</td>
                <td>Hyuga</td>
            </tr>
            <tr class="isres">
                <td>Yuno</td>
                <td>Gasai</td>
            </tr>
            <tr class="isres">
                <td>Asuna</td>
                <td>Yuuki</td>
            </tr>
        </table>

2
  • Muchas gracias, funciona perfectamente Commented el 9 mar. 2020 a las 14:11
  • No ahy de que :)
    – Carmen
    Commented el 9 mar. 2020 a las 14:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.