0

i have tried to count number of dynamic rows in html table in which when counting the rows it is also counting table head and i want to display number of rows in a input box.

$(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;
    }); 
});
3
  • We need the HTML too
    – Popnoodles
    Nov 20, 2020 at 17:44
  • document.write(rowCount*200).innerHTML; will not work. return(x) will not work. The last line of code will never be executed. Nov 20, 2020 at 17:47
  • Please add your markup to the question
    – onlit
    Nov 20, 2020 at 17:50

2 Answers 2

0

This code will count the number of rows in the table body and place the number of rows * 280 into the input element.

$(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" />

0

You can use jQuery itself for adding count in the input box. Try the below code for displaying count inside 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)
    }); 
});

Please add HTML of the table for addressing the table header count issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.