Jquery selector to count the number of visible rows of a table?

Question

I have 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 lines that do not have display:none . How can i do this?

Answer 1

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

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

If <table> not displayed on the screen ( :visible returns false, if any parent is hidden, the element doesn’t need to be hidden directly), then use .filter() , for example:

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

Answer 2

$('tr:visible').length

Answer 3

You can also view the individual visible rows of the table.

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

totalRowWithoutHeader gives the total number of rows excluding the header row.

Answer 4

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