JQuery的强大之处，这里就不用讲了。这里将用一行简单的JQuery代码实现简单的表格筛选。先贴上代码：

 
  
  1. 代码   
  2. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryTableFilter.aspx.cs" Inherits="JqueryTableFilter" %>   
  3.  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  5.  
  6. <html xmlns="http://www.w3.org/1999/xhtml">   
  7. <head runat="server">   
  8.     <title></title>   
  9.  
  10.     <script src="Script/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>      
  11.     <script type="text/javascript">   
  12.         $(function() {   
  13.         $("#Text1").keyup(function() {   
  14.         var filterText = $(this).val();   
  15.             $("#<%=GridView1.ClientID %> tr").not(":first").hide().filter(":contains('" + filterText + "')").show();;   
  16.         }).keyup();   
  17.         });   
  18.     </script>   
  19. </head>   
  20. <body>   
  21.     <form id="form1" runat="server">   
  22.     <div style="width:60%;">   
  23.         <input id="Text1" type="text" />   
  24.         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"   
  25.             DataKeyNames="OrderID" DataSourceID="SqlDataSource1"   
  26.             HorizontalAlign="Left" PageSize="50" >   
  27.             <Columns>   
  28.                 <asp:BoundField DataField="OrderID" HeaderText="OrderID" ReadOnly="True"   
  29.                     SortExpression="OrderID" InsertVisible="False" />   
  30.                 <asp:BoundField DataField="CustomerID" HeaderText="CustomerID"   
  31.                     SortExpression="CustomerID" />   
  32.                 <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID"   
  33.                     SortExpression="EmployeeID" />   
  34.                 <asp:BoundField DataField="OrderDate" HeaderText="OrderDate"   
  35.                     SortExpression="OrderDate" />   
  36.                 <asp:BoundField DataField="RequiredDate" HeaderText="RequiredDate"   
  37.                     SortExpression="RequiredDate" />   
  38.                 <asp:BoundField DataField="ShippedDate" HeaderText="ShippedDate"   
  39.                     SortExpression="ShippedDate" />   
  40.                 <asp:BoundField DataField="ShipVia" HeaderText="ShipVia"   
  41.                     SortExpression="ShipVia" />   
  42.                 <asp:BoundField DataField="Freight" HeaderText="Freight"   
  43.                     SortExpression="Freight" />                  
  44.             </Columns>   
  45.         </asp:GridView>   
  46.         <asp:SqlDataSource ID="SqlDataSource1" runat="server"   
  47.             ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"   
  48.             SelectCommand="SELECT top 50 * FROM [Orders]"></asp:SqlDataSource>   
  49.     </div>   
  50.     </form>   
  51. </body>   
  52. </html>   
  53.  
 
  
效果：
 
  
 
  
这里是经过筛选的截图；
 
  
JQuery代码就：
 
  
 
  
  1. 代码   
  2. $(function() {   
  3. $("#Text1").keyup(function() {   
  4. var filterText = $(this).val();   
  5.     $("#<%=GridView1.ClientID %> tr").not(":first").hide().filter(":contains('" + filterText + "')").show();;   
  6. }).keyup();   
  7. });  
 
  
里面最重要的就是JQuery的选择器：
 
  
1：$("#<%=GridView1.ClientID %> tr")选择表格的所有行；
 
  
2：not(":first")：除去第一行表头行；
 
  
3：filter(":contains('" + filterText + "')"):从上面所选择的行里面筛选出行文本中包含filterText 的行显示出来；
 
  
4：最后加一句keyup()是为了在提交后重新触发keyup事件。（但是在这里没有作用因为我用的客户端控件没有ViewState
 
  
    若是服务器端控件就会看见他的作用）。
 
  
       JQuery的选择器的强大之处，让我们能救这么简单的实现客户端的简单筛选。最后加一句关于表格筛选有JQuery插件提供
 
  
给我们选择， 但是这种简单的功能，我不会去选择加入一个JavaScript文件库，呵呵。
 
  
   
 
  
本博客中同类文章还有，请见：我jQuery系列之目录汇总