编程 Javascript

基于JQuery的一句代码实现表格的简单筛选

Posted in Javascript onJuly 26, 2010

效果图:
基于JQuery的一句代码实现表格的简单筛选
代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryTableFilter.aspx.cs" Inherits="JqueryTableFilter" %> 
<!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="Script/jquery-1.3.2-vsdoc.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
$("#Text1").keyup(function() { 
var filterText = $(this).val(); 
$("#<%=GridView1.ClientID %> tr").not(":first").hide().filter(":contains('" + filterText + "')").show();; 
}).keyup(); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div style="width:60%;"> 
<input id="Text1" type="text" /> 
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
DataKeyNames="OrderID" DataSourceID="SqlDataSource1" 
HorizontalAlign="Left" PageSize="50" > 
<Columns> 
<asp:BoundField DataField="OrderID" HeaderText="OrderID" ReadOnly="True" 
SortExpression="OrderID" InsertVisible="False" /> 
<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" 
SortExpression="CustomerID" /> 
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" 
SortExpression="EmployeeID" /> 
<asp:BoundField DataField="OrderDate" HeaderText="OrderDate" 
SortExpression="OrderDate" /> 
<asp:BoundField DataField="RequiredDate" HeaderText="RequiredDate" 
SortExpression="RequiredDate" /> 
<asp:BoundField DataField="ShippedDate" HeaderText="ShippedDate" 
SortExpression="ShippedDate" /> 
<asp:BoundField DataField="ShipVia" HeaderText="ShipVia" 
SortExpression="ShipVia" /> 
<asp:BoundField DataField="Freight" HeaderText="Freight" 
SortExpression="Freight" /> 
</Columns> 
</asp:GridView> 
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
SelectCommand="SELECT top 50 * FROM [Orders]"></asp:SqlDataSource> 
</div> 
</form> 
</body> 
</html>

JQuery代码就：

$(function() { 
$("#Text1").keyup(function() { 
var filterText = $(this).val(); 
$("#<%=GridView1.ClientID %> tr").not(":first").hide().filter(":contains('" + filterText + "')").show();; 
}).keyup(); 
});

里面最重要的就是JQuery的选择器：

1：$("#<%=GridView1.ClientID %> tr")选择表格的所有行；
2：not(":first")：除去第一行表头行；
3：filter(":contains('" + filterText + "')"):从上面所选择的行里面筛选出行文本中包含filterText 的行显示出来；
4：最后加一句keyup()是为了在提交后重新触发keyup事件。（但是在这里没有作用因为我用的客户端控件没有ViewState
若是服务器端控件就会看见他的作用）。

JQuery的选择器的强大之处，让我们能救这么简单的实现客户端的简单筛选。最后加一句关于表格筛选有JQuery插件提供
给我们选择，但是这种简单的功能，我不会去选择加入一个JavaScript文件库，呵呵。
作者：破浪

基于JQuery的一句代码实现表格的简单筛选

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery的强大选择器小结

Dec 27 Javascript

JS+DIV实现鼠标划过切换层效果的方法

May 25 Javascript

BootStrap初学者对弹出框和进度条的使用感觉

Jun 27 Javascript

jQuery easyui刷新当前tabs的方法

Sep 23 Javascript

浅谈Vue的基本应用

Dec 27 Javascript

js如何找出字符串中的最长回文串

Jun 04 Javascript

JS非行间样式获取函数的实例代码

Jun 05 Javascript

在vue中使用echarts图表实例代码详解

Oct 22 Javascript

vue中axios防止多次触发终止多次请求的示例代码（防抖）

Feb 16 Javascript

详解ES6 CLASS在微信小程序中的应用实例

Apr 24 Javascript

vue style width a href动态拼接问题的解决

Aug 07 Javascript

Vue中插槽slot的使用方法与应用场景详析

Jun 08 Vue.js

jQuery getJSON 处理json数据的代码

Jul 26 #Javascript

基于jQuery的可以控制左右滚动及自动滚动效果的代码

Jul 25 #Javascript

用jquery实现下拉菜单效果的代码

Jul 25 #Javascript

利用腾讯的ip地址库做ip物理地址定位

Jul 24 #Javascript

利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解

Jul 24 #Javascript

来自qq的javascript面试题

Jul 24 #Javascript

6个DIV 135或246间隔一秒轮番显示效果

Jul 24 #Javascript