I've following HTML code of a table:

<table   id="blacklistgrid"  class="table table-bordered table-hover table-striped">
  <thead>
    <tr>
      <th style="vertical-align:middle" >Pack Of</th>
      <th style="vertical-align:middle">Quantity</th>
      <th style="vertical-align:middle">Volume</th>
      <th style="vertical-align:middle">Unit</th>
      <th style="vertical-align:middle">Rebate Amount</th>
    </tr>
  </thead>
  <tbody class="apnd-test">
    <tr id="Row1">
      <td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
      <td><input type="text" name="amount[]" value="3.00" class="form-control" size="9"/></td>
    </tr>
    <tr id="Row1">
      <td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
      <td><input type="text" name="amount[]" value="3.00" class="form-control" size="9"/></td>
    </tr>
    <tr id="Row1">
      <td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
      <td><input type="text" name="amount[]" value="3.00" class="form-control" size="9"/></td>
    </tr>
    <tr id="Row1">
      <td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
      <td><input type="text" name="amount[]" value="3.00" class="form-control" size="9"/></td>
    </tr>
  </tbody>
</table>

Now I want to count the number of table rows <tr> contained in table body <tbody>. I don't want to consider the table row <tr> contained in table head <thead> using jQuery as well as javascript. I tried following code in jQuery but it's giving me undefined alert. So can someone please help me in this regard please? Thanks in advance. My non-working jQuery code is as follows:

$( document ).ready(function() {
  var row_no = $('#blacklistgrid tbody tr').length;
  alert(row_no);
});

I've following HTML code of a table:

<table   id="blacklistgrid"  class="table table-bordered table-hover table-striped">
  <thead>
    <tr>
      <th style="vertical-align:middle" >Pack Of</th>
      <th style="vertical-align:middle">Quantity</th>
      <th style="vertical-align:middle">Volume</th>
      <th style="vertical-align:middle">Unit</th>
      <th style="vertical-align:middle">Rebate Amount</th>
    </tr>
  </thead>
  <tbody class="apnd-test">
    <tr id="Row1">
      <td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
      <td><input type="text" name="amount[]" value="3.00" class="form-control" size="9"/></td>
    </tr>
    <tr id="Row1">
      <td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
      <td><input type="text" name="amount[]" value="3.00" class="form-control" size="9"/></td>
    </tr>
    <tr id="Row1">
      <td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
      <td><input type="text" name="amount[]" value="3.00" class="form-control" size="9"/></td>
    </tr>
    <tr id="Row1">
      <td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
      <td><input type="text" name="amount[]" value="3.00" class="form-control" size="9"/></td>
    </tr>
  </tbody>
</table>

Now I want to count the number of table rows <tr> contained in table body <tbody>. I don't want to consider the table row <tr> contained in table head <thead> using jQuery as well as javascript. I tried following code in jQuery but it's giving me undefined alert. So can someone please help me in this regard please? Thanks in advance. My non-working jQuery code is as follows:

$( document ).ready(function() {
  var row_no = $('#blacklistgrid tbody tr').length;
  alert(row_no);
});

• javascript
• jquery
• html-table
• tablerow
• rowcount

• It's working for me jsfiddle/_wilmer/5wemW – Wilmer Commented Apr 27, 2014 at 11:09

2 Answers 2

In pure javascript you can do:

var row_no = document.getElementById('blacklistgrid').rows.length - 1;
alert(row_no);

Or add an id to tbody only:

var row_no = document.getElementById('blacklistbody').rows.length;

Sorry, I can't ment yet. But your code should work. Here is http://jsfiddle/eW5v5/ Are you sure that table exists by the time you run your calculation?

$( document ).ready(function(){
})

Even though you are waiting until DOM is created, there might be something else going on that creates it after.

Yes, and with vanilla JS you can do it like:

  var row_no = document.querySelectorAll('tbody tr').length;
  // or for older browsers:
  // var row_no = document.getElementById('blacklistgrid').getElementsByTagName('tbody')[0].getElementsByTagName('tr').length;
  alert(row_no);