javascript - 获取可见表行的大小

标签 javascript html

我有此下拉选项,每次此下拉选项更改时,都会根据下拉列表的值来过滤表的内容。但是,如果表中的所有内容都被完全过滤(基本上什么也不显示,则想显示),我想显示一条消息。我有这段代码,但是它没有考虑表行的可见性。

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

最佳答案

可能的jQuery解决方案:



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





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

示例here

关于javascript - 获取可见表行的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31591862/

相关文章:

javascript - slider 在多个 div 中不起作用

javascript - 使用jQuery查找顶部> x的位置的对象

javascript - 设置node.outerHTML不会执行任何操作

html - 如何解决 Div 类中的 Angular 范围变量

javascript - 如何使用表中的jQuery在<td>和<input>之间正确交换,反之亦然?

javascript - 如何最好地计算TextArea中的文本字节

javascript - react 子组件重新渲染而不改变状态

javascript - 提交()函数是否对onSubmit具有优先权?

javascript - 在 Internet Explorer 9 中不再触发事件 ondragstart

html - CSS 使宽度为 :100% stop against floating objects