【问题标题】:jquery table filter script not not workingjquery表过滤器脚本不起作用
【发布时间】:2014-04-27 19:29:52
【问题描述】:

我有一个 JSP 页面,它显示通过 java servlet 从 mysql 获取的记录。现在我想使用 jquery 过滤获得的记录。我在jsp页面的head部分使用了以下代码

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js">
</script><script type= "text/javascript">{$(document).ready(function()
{$("#searchInput").keyup(function() {
    var rows = $("#fbody").find("tr").hide();
    var data = this.value.split(" ");
    $.each(data, function(i, v) {
        rows.filter(":contains('" + v + "')").show();
    });
})})};
</script>

下面给出了从servlet获取记录并在JSP中显示的代码

 <body><input id="searchInput" ><br/>


<TABLE  align="Center" border="1px" width="80%">
<thead>
<tr><th><b>User_ID</b></th>
    <th><b>User_Name</b></th>
    <th><b>Password</b></th>
    <th><b>Designation</b></th>
</tr>
</thead>
    <%Iterator itr;%>
    <%List data=(List) request.getAttribute("UserData");
    for(itr=data.iterator();itr.hasNext();)
    {%>
        <tbody id="fbody">
        <tr>
            <% String s= (String) itr.next(); %> 
            <td><%=s %></td>
            <td><%=itr.next() %></td>
            <td><%=itr.next() %></td>
            <td><%=itr.next() %></td>

            <form id="edit" action="EditRecord" method="post" >
            <td><input type="hidden" name="hidden_edit" id="edit_id" value="<%=s %>"/> 
            <input type="submit" value="Edit" name="edit"> </td>
            </form>

            <td><form id="delete" action="DeleteRecord" method="post" >
            <td><input type="hidden" name="hidden_delete" id="delete_id" value="<%=s %>"/>
            <input type="submit" value="delete" name="delete"> </td>
            </form></td>    
    <%} %>
        </tr>
        </tbody>
</TABLE></body>

我能够获取所有记录,但脚本没有过滤我的记录。不知道问题出在哪里,谁能帮帮我。

【问题讨论】:

  • 尝试 var rows = $("#fbody").find("tr");和 rows.hide();之后
  • @Timur 感谢您的回复。但是可以详细说明我应该把上面的行放在哪里吗?
  • 检查来自@Abimbole Esuruoso 的答案,看起来您有多个具有相同ID 的tbody 标签,这是不应该发生的。

标签: javascript jquery html jsp servlets


【解决方案1】:

从你的 for 循环中取出 tbody。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多