统计动态行数并显示在html的输入框中

Question

我试图计算 html 表中的动态行数，其中在计算行数时，它也在计算表头，并且我想在输入框中显示行数。

$(document).ready(function(){ 

    $(".count").click(function(){            

        // Select all the rows in the table 

        // and get the count of the selected elements 

        var rowCount = $("#tbpnr tr").length; 

        var x = document.write(rowCount*280).innerHTML;

          return(x);

        document.getElementById("answer").value = x;

    }); 

});

Answer 1

此代码将计算表主体中的行数，并将行数 * 280 放入输入元素中。$(document).ready(function() {&nbsp; $(".count").click(function() {&nbsp; &nbsp; var rowCount = $("#tbpnr tr").length;&nbsp; &nbsp; document.getElementById("count").textContent = rowCount;&nbsp; &nbsp; document.getElementById("answer").value = rowCount * 280;&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody id="tbpnr">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table><button class="count">Count</button><br>Number of rows:<b id="count"></b><br>Number of rows * 280:<input id="answer" />

Answer 2

您可以使用jQuery它本身来添加框中的计数input。尝试使用下面的代码来显示内部的计数input。$(document).ready(function(){&nbsp;&nbsp; &nbsp; $(".count").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // Select all the rows in the table&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // and get the count of the selected elements&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var rowCount = $("#tbpnr tr").length;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $("#answer").attr("value", rowCount*280)&nbsp; &nbsp; });&nbsp;});请添加表格的 HTML 以解决表格标题计数问题。