在ASP.NET表中使用jQuery QuickSearch插件进行快速搜索

Question

我正在尝试在我的asp.net应用程序中实现jquery quicksearch插件。 下面的代码在ASP.NET GridView中有效，但在ASP.NET表中无效。 请帮忙

我有一个ASP.NET表，我想实时过滤/搜索文本框上的keydown / textchange事件中的表行。 每当我在文本框中键入内容时，如果表中存在特定的文本，则仅该特定的行应可见。

请帮助...我的项目将在9天内上线。


  
 
  
  
   
    
    <script type="text/javascript">
		    $(function () {
		        $('input#id_search').quicksearch('table#Table1 tbody tr');
             })
    </script> 
    <script src="scripts/jquery-1.4.1-vsdoc.js"></script>
<script src="scripts/jquery-1.4.1.js"></script>
<script src="scripts/jquery-1.4.1.min.js"></script>
<script src="scripts/jquery.quicksearch.js"></script>

<form runat="server">
  <div>
    <input id=id_search type=text placeholder="Search" />
  </div>
  <div>
     <asp:Table ID="Table1" runat="server" ClientIDMode="Static"  CssClass="table table-responsive">
       <asp:TableHeaderRow>
         
          <asp:TableHeaderCell Text="Block"></asp:TableHeaderCell>
		  <asp:TableHeaderCell Text="Flat"></asp:TableHeaderCell>
          <asp:TableHeaderCell Text="Name"></asp:TableHeaderCell>
         
       </asp:TableHeaderRow>
       
             <asp:TableRow>
                 <asp:TableCell Text="B-Wing"></asp:TableCell>
                 <asp:TableCell Text="101"></asp:TableCell>
                 <asp:TableCell Text="ABC"></asp:TableCell>
             </asp:TableRow>
       
             <asp:TableRow>
                 <asp:TableCell Text="A-wing"></asp:TableCell>
                 <asp:TableCell Text="102"></asp:TableCell>
                 <asp:TableCell Text="DEF"></asp:TableCell>
            </asp:TableRow>
       
    </asp:Table>
  </div>
  </form>

Answer 1

Tbody没有生成...也请检查以下jQuery参考

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>

<script>


    $(document).ready(function () {
        $('input#id_search').quicksearch('table#Table1 tr');
    });

    </script>

编辑：在我的机器上工作的页面的完整源代码确保脚本存在于其位置。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ControlTest.WebForm1" %>

<%@ Register Assembly="ControlTest" Namespace="ControlTest" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>


<%--<script src="Scripts/jquery-2.1.0.js" type="text/javascript"></script>--%>

<script src="jquery.quicksearch.js"></script>

</head>
<body>
    <form id="form1" runat="server">


  <div>
    <input id=id_search type=text placeholder="Search" />
  </div>
  <div>
     <asp:Table ID="Table1" runat="server" ClientIDMode="Static"  CssClass="table table-responsive">
       <asp:TableHeaderRow>

          <asp:TableHeaderCell Text="Block"></asp:TableHeaderCell>
          <asp:TableHeaderCell Text="Flat"></asp:TableHeaderCell>
          <asp:TableHeaderCell Text="Name"></asp:TableHeaderCell>

       </asp:TableHeaderRow>

             <asp:TableRow>
                 <asp:TableCell Text="B-Wing"></asp:TableCell>
                 <asp:TableCell Text="101"></asp:TableCell>
                 <asp:TableCell Text="ABC"></asp:TableCell>
             </asp:TableRow>

             <asp:TableRow>
                 <asp:TableCell Text="A-wing"></asp:TableCell>
                 <asp:TableCell Text="102"></asp:TableCell>
                 <asp:TableCell Text="DEF"></asp:TableCell>
            </asp:TableRow>

    </asp:Table>
  </div>


<script>


    $(document).ready(function () {
        //$('input#id_search').quicksearch('table#Table1 tr');
        $('input#id_search').quicksearch('table#Table1 tr');
    });
            //
    </script>



    </form>
</body>
</html>

在ASP.NET表中使用jQuery QuickSearch插件进行快速搜索

问题描述

1 个解决方案

解决方案1
0 2014-09-22 15:10:55

在ASP.NET表中使用jQuery QuickSearch插件进行快速搜索

问题描述

1 个解决方案

解决方案1 0 2014-09-22 15:10:55

解决方案1
0 2014-09-22 15:10:55