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

计算 html 表的行数

  • 772

嗨，我正在尝试计算表格的行数html并用 a 显示它们，label但我找不到如何做到这一点，我找到了一种方法来做到这一点，javaScript但函数通过这样的方式调用它onclick：

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

但正如我所说，我不是在寻找这样的行数，我正在寻找的是它出现在表格上方的标签中。我怎么能做到？

谢谢。

javascript

1 Answers

  1. Best Answer

    如果您只有一张表，则可以计算元素tr，如本例所示。如果有更多表或者您只想计算某些行，您可以向它们添加不同的类tr并计算每个元素的数量，就像我在第二个中添加的那样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