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解决方案：

＆＃13;

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

＆＃13;

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

示例here。

Answer 2

问题答案的标题是

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

获取可见表行的大小

2 个答案: