CODEWITHSUNDEEP
javascripthtml
nubteens
nubteens

Reputation: 6148

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;
}

Upvotes: 0

Views: 179

Answers (2)

vinayakj
vinayakj

Reputation: 5681

From title of question answer is 

$rows = $('#table tbody tr:visible');

Upvotes: 0

Ash
Ash

Reputation: 2108

A possible jQuery solution:

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

Will give you a count of the visible table rows.

Example here.

Upvotes: 1

Related Questions