65

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?

Improve this question

4 Answers 4

Reset to default
144

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;
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

And if you only want the count to include visible rows in the table-body then use $('tr:visible').length - $('thead>tr').
16

$('tr:visible').length

Improve this answer

Comments

9

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.

Improve this answer

1 Comment

Better not to hard-code the number of header rows and use $('thead>tr').length instead.
3

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

Improve this answer

1 Comment

Not sure why this is upvoted, .is(":visible") returns a boolean, you cannot call .length, instead of .is() you'd need .filter().

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.