快速搜索在asp.net表中使用jQuery快速搜索插件

我想在我的asp.net应用程序中实现jQuery快速搜索插件。下面的代码在ASP.NET GridView中工作，但不在ASP.NET表中。请帮助快速搜索在asp.net表中使用jQuery快速搜索插件

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

请帮忙... 我的项目将在9天内上线。不如何产生


          
   
    
    <script type="text/javascript"> 
 
\t \t  $(function() { 
 
\t \t   $('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> 
 
\t \t <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>

来源

2014-09-22 Mohammed Nasir

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>

来源

2014-09-22 15:10:55

这段代码也不能正常工作..... – 2014-09-23 07:12:37

@MohammedNasir：我编辑的职位。 – 2014-09-23 07:45:21

快速搜索在asp.net表中使用jQuery快速搜索插件

回答

相关问题