jquery selector to count the number of visible table rows?

JqueryJquery Selectors

Jquery Problem Overview


I've got this 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>

I need to count the number of rows that don't have display:none. How can I do that?

Jquery Solutions


Solution 1 - Jquery

You can use the :visible selector and .length like this:

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

If the <table> itself isn't visible on the screen (:visible returns false if any parent is hidden, the element doesn't have to be hidden directly), then use .filter(), like this:

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

Solution 2 - Jquery

$('tr:visible').length

Solution 3 - Jquery

You can also view particular table visible rows

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

The totalRowWithoutHeader gives the total row count excluding header row.

Solution 4 - Jquery

$("tr:visible") gets you the results of the visible rows, and I think you can then do .length

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionsprugmanView Question on Stackoverflow
Solution 1 - JqueryNick CraverView Answer on Stackoverflow
Solution 2 - JqueryTatu UlmanenView Answer on Stackoverflow
Solution 3 - JqueryKailasView Answer on Stackoverflow
Solution 4 - JqueryBrian MainsView Answer on Stackoverflow