jQuery get elements without display="none"
$("tbody > tr:visible")
Should do it, by using the :visible
selector.
The accepted answer works, and is very useful, but not technically what the OP directly asked.
I'm splitting hairs, admittedly, but I needed to find only tr
elements which literally did not contain display: none
within their style
attribute, because the parent element might be hidden, thus returning no elements.
So I wrote the following:
var $trWithoutDisplayNone = $('tbody > tr:not([style*="display: none"])');
Update:
The original code will select an array of all tr
s on a page with no style attribute containing "display: none"
.
A more efficient and specific way would be to target the table itself.
HTML:
<table id="tableID">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr style="background: grey; display: none;">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
JavaScript/jQuery:
<script>
function getDisplayedRows($targetTable) {
return $targetTable.find('tr:not([style*="display: none"])');
}
$(function() { //shortcut for document ready
var $table = $("#tableID"), //get table by selector
$visibleRows = getDisplayedRows($table); //run function to get rows without display: none
});
</script>