64

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?

sprugman
  • 18,691
  • 33
  • 107
  • 163

4 Answers4

141

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;
Nick Craver
  • 610,884
  • 134
  • 1,288
  • 1,151
16

$('tr:visible').length

Tatu Ulmanen
  • 119,594
  • 33
  • 182
  • 182
8

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.

Kailas
  • 3,001
  • 5
  • 39
  • 46
3

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

Brian Mains
  • 50,194
  • 35
  • 142
  • 253
  • 3
    Not sure why this is upvoted, `.is(":visible")` returns a **boolean**, you cannot call `.length`, instead of `.is()` you'd need `.filter()`. – Nick Craver May 28 '10 at 19:30