Home / Questions / 335592
Accepted
Rafael Monroy Rodriguez
Asked: 2020-03-10 05:59:19 +0800 CST 2020-03-10 05:59:19 +0800 CST

Count rows of an html table

  • 772

Hi , I'm trying to count the rows of a table htmland show them with a labelbut I can't find how to do it, I found a way to do it with javaScriptbut the function calls it by means of a onclicklike this:

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

But as I say, I'm not looking for the number of rows to come out like this, what I'm looking for is for it to come out in a label above the table. How could I do it?

Thanks.

javascript

1 Answers

  1. Best Answer

    If you only have one table you can count the elements tr, as in this example. If there are more tables or you only want to count certain rows, you can add different classes to them trand count the amount of each element, as I added in the second 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