nubteens nubteens - 6 months ago 18
Javascript Question

Getting the size of visible table rows

I have this drop down option and every time this drop down option changes, the content of the table are being filtered based on the value of the drop down. However, I want to display a certain message if everything in the table is completely filtered (basically it if shows nothing). I have this code, but it does not consider the visibility of the table row.

alert(document.getElementById("table").rows.length);


Drop down (Html):

<td>
Room Preference: <a style="color: red;">*</a>
</td>
<td>
<select name="roompreference" id="roompreference" class="form-control placeholder-no-fix" onchange="setRooms();">
<option value="Ward">Ward</option>
<option value="Semi-private">Semi-private</option>
<option value="Private">Private</option>
<option value="Suite Room">Suite Room</option>
<option value="ICU">ICU</option>
<option value="ISO">ISO</option>
</select> <br>
</td>


Table (Html):

<table class="table table-bordered table-striped table-condensed" id="table">
<thead>
<tr>
<th width="1px">
Admit
</th>
<th>
Room Number
</th>
<th>
Room Type
</th>
</tr>
</thead>
<tbody>
<%
ArrayList<Room> rooms = (ArrayList)session.getAttribute("rooms");
for(Room r: rooms) {
if(r.getStatus().equals("Available")) {
%>
<tr>
<td align="center">
<input type="radio" name="room" value="<%=r.getRoomNumber()%>">
</td>
<td>
<%=r.getRoomNumber()%>
</td>
<td>
<%=r.getRoomType()%>
</td>
</tr>
<%}}%>
</tbody>
<thead>
<tr>
<td colspan="3" align="center" style="color: red;">
There are no available rooms.
</td>
</tr>
</thead>
</table>


Javascript:

setRooms();
function setRooms() {
var $rows = $('#table tbody tr');
var val = document.getElementById("roompreference").value,
reg = RegExp(val),
text;
$rows.show().filter(function() {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
var size = 0;
}

Ash Ash
Answer

A possible jQuery solution:

$("#table tbody tr:visible").length

Will give you a count of the visible table rows.

Example here.