快速搜索在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快速搜索插件

回答

相關問題