JQuery селектор для подсчета количества видимых строк таблицы?

Question

У меня есть этот HTML:

<table>
    <tr style="display:table-row"><td>blah</td></tr>
    <tr style="display:none"><td>blah</td></tr>
    <tr style="display:none"><td>blah</td></tr>
    <tr style="display:table-row"><td>blah</td></tr>
    <tr style="display:table-row"><td>blah</td></tr>
</table>

Мне нужно посчитать количество строк, которые не имеют display:none. Как я могу это сделать?

Answer 1

Вы можете использовать селектор :visible и .length следующим образом:

var numOfVisibleRows = $('tr:visible').length;

Если <table> сам не виден на экране (:visible возвращает false, если какой-либо родитель скрыт, элемент не должен быть скрыт напрямую), тогда используйте .filter(), вот так:

var numOfVisibleRows = $('tr').filter(function() {
  return $(this).css('display') !== 'none';
}).length;

Answer 2

$('tr:visible').length

Answer 3

Вы также можете просмотреть определенные таблицы видимых строк

 var totalRow =  $('#tableID tr:visible').length;
 var totalRowWithoutHeader = totalRow-1;

totalRowWithoutHeader дает общее количество строк, исключая строку заголовка.

Answer 4

$ ("tr: visible") получает результаты видимых строк, и я думаю, что вы можете сделать .length