javascript - 获取可见表行的大小

Question

我有这个下拉选项，每次这个下拉选项发生变化时，表的内容都会根据下拉的值进行过滤。但是，如果表中的所有内容都被完全过滤(基本上什么也不显示)，我想显示特定消息。我有这段代码，但它没有考虑表行的可见性。

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

下拉菜单(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>

表格(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;
}

Answer 1

可能的 jQuery 解决方案:

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

将为您提供可见表格行的计数。

示例 here .