统计动态行数并显示在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() {

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

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

    document.getElementById("count").textContent = rowCount;

    document.getElementById("answer").value = rowCount * 280;

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

  <thead>

    <tr>

      <th></th>

      <th></th>

      <th></th>

      <th></th>

    </tr>

  </thead>

  <tbody id="tbpnr">

    <tr>

      <td></td>

      <td></td>

      <td></td>

      <td></td>

    </tr>

    <tr>

      <td></td>

      <td></td>

      <td></td>

      <td></td>

    </tr>

    <tr>

      <td></td>

      <td></td>

      <td></td>

      <td></td>

    </tr>

    <tr>

      <td></td>

      <td></td>

      <td></td>

      <td></td>

    </tr>

    <tr>

      <td></td>

      <td></td>

      <td></td>

      <td></td>

    </tr>

    <tr>

      <td></td>

      <td></td>

      <td></td>

      <td></td>

    </tr>

    <tr>

      <td></td>

      <td></td>

      <td></td>

      <td></td>

    </tr>

    <tr>

      <td></td>

      <td></td>

      <td></td>

      <td></td>

    </tr>

    <tr>

      <td></td>

      <td></td>

      <td></td>

      <td></td>

    </tr>

    <tr>

      <td></td>

      <td></td>

      <td></td>

      <td></td>

    </tr>

    <tr>

      <td></td>

      <td></td>

      <td></td>

      <td></td>

    </tr>

    <tr>

      <td></td>

      <td></td>

      <td></td>

      <td></td>

    </tr>

  </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(){ 

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

        // Select all the rows in the table 

        // and get the count of the selected elements 

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

        $("#answer").attr("value", rowCount*280)

    }); 

});

请添加表格的 HTML 以解决表格标题计数问题。