Jquery selector, чтобы подсчитать количество видимых строк таблицы?

У меня есть этот 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. Как я могу это сделать?

Ответы

Ответ 1

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

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

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

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

Ответ 2

$('tr:visible').length

Ответ 3

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

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

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

Ответ 4

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