Как посчитать количество <tr>, содержащееся в <tbody>, используя jQuery, а также javascript?

Question

Как посчитать количество <tr>, содержащееся в <tbody>, используя jQuery, а также javascript?

0

Я следую HTML-коду таблицы:

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

Теперь я хочу подсчитать количество строк таблицы <tr> содержащихся в теле тела <tbody>. Я не хочу рассматривать таблицу table <tr> содержащуюся в head head <thead> используя jQuery, а также javascript. Я пробовал следующий код в jQuery, но это давало мне неопределенное предупреждение. Так может кто-то, пожалуйста, помогите мне в этом отношении, пожалуйста? Заранее спасибо. Мой неработающий код jQuery выглядит следующим образом:

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

PHPLover 27 апр. 2014, в 13:54

Источник

0

Это работает для меня jsfiddle.net/_wilmer/5wemW
Wilmer 27 апр. 2014, в 11:09

Теги:

javascript

jquery

html-table

tablerow

rowcount

2 ответа

3

В чистом javascript вы можете делать:

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

Или добавьте только идентификатор:

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

Wilmer 27 апр. 2014, в 09:03

Ещё вопросы

Это работает для меня jsfiddle.net/_wilmer/5wemW

Dermen · Accepted Answer · 2014-04-27T09-22-00.000Z

Извините, я не могу комментировать. Но ваш код должен работать. Вот http://jsfiddle.net/eW5v5/ Вы уверены, что таблица существует к моменту запуска вашего расчета?

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

Даже если вы ожидаете создания DOM, может произойти что-то еще, что создает его после.

Да, и с vanilla JS вы можете сделать это так:

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