web-dev-qa-db-fra.com

sélecteur jquery pour compter le nombre de lignes de table visibles?

J'ai ce 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>

Je dois compter le nombre de lignes qui pas ont display:none. Comment puis je faire ça?

jqueryjquery-selectors
58
sprugman

Vous pouvez utiliser le sélecteur :visible et .length comme ceci:

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

Si le <table> Lui-même n'est pas visible à l'écran ( :visible renvoie false si un parent est masqué, l'élément n'a pas besoin d'être masqué directement), puis utilisez .filter() , comme ceci:

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

$('tr:visible').length

13
Tatu Ulmanen

Vous pouvez également afficher des lignes visibles de table particulières

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

totalRowWithoutHeader donne le nombre total de lignes hors ligne d'en-tête.

8
Kailas

$ ("tr: visible") vous donne les résultats des lignes visibles, et je pense que vous pouvez ensuite faire .length

3
Brian Mains