基于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文件库，呵呵。
作者：破  浪

赞 (0)

相关推荐

  • jQuery筛选器children()案例详解(图文)

    jQuery筛选器children()案例详解(图文)

    jQuery的选择包含两种,一种是选择器,一种是筛选器.筛选器是对选择器选定的jQuery对象做进一步选择. children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子. 完整的格式如下: 复制代码 代码如下: .children(expr) 其中children是筛选器的名称,expr是表达式,所有选择器中的表达式都可以用在这,比如按标签名"div",按类名".class",按序号":first"等等,如果表达式为空,那么返

  • JQuery筛选器全系列介绍

    1.选择对象 1).基本 ·#id 根据给定的ID匹配一个元素.例如:$("#id")·element 根据给定的元素名匹配所有元素.例如:$("div")·.class 根据给定的类匹配元素.例如:$(".style1");·* 匹配所有元素.例如:$("*")·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回.例如:$("#id,div,.style1"

  • 基于jquery实现表格内容筛选功能实例解析

    基于jquery实现表格内容筛选功能实例解析

    当表格内的数据较多时,我们无法一页一页的查找,这时可以通过一个搜索框来实现搜索. 对于这个搜素框,我们为了更好的体验可以利用keyup事件实现在用户输入的时候就开始筛选,而不是填完以后点击搜索按钮再执行. 效果图: 实现代码: <html> <head> <meta charset="utf-8" /> <script src="jquery-1.3.2.min.js"></script> <link

  • jquery实现多条件筛选特效代码分享

    jquery实现多条件筛选特效代码分享

    本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下: jquery实现的多条件搜索表单带日期选择表格表单效果源码,是一段实现了多个条件筛选搜索的特效代码,多条件拥有时间.地点.酒店位置及酒店名称等选项,同时在时间的输入表格中拥有时间选择功能,是一款非常实用的特效代码,值得大家学习. 运行效果图:                        -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,

  • JQuery操作表格(隔行着色,高亮显示,筛选数据)

    JQuery操作表格(隔行着色,高亮显示,筛选数据)

    查了些资料,写了4个Demo: 1. 隔行着色 复制代码 代码如下: $('#table1 tr:odd').addClass('odd'); $('#table1 tr:even').addClass('even'); 效果: 2. 高亮含有特定数据的行 复制代码 代码如下: $("#table2 tr:contains('Fuck')").addClass("selected"); 3. 筛选数据 复制代码 代码如下: $("#filter"

  • Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JquerySort.aspx.cs" Inherits="demo_JquerySort" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

  • 让你的CSS像Jquery一样做筛选的实现方法

    语法说明: E -- 元素 att -- 属性 val -- 属性值 E:first-child E:last-child 匹配文档中具有att属性的E元素 语法: E[att] 匹配文档中具有att属性且其值为val的E元素 语法: E[att=val] 匹配文档中具有att属性且其中一个值(多个值使用空格分隔)为val(val不能包含空格)的E元素 语法: E[att~=val] 匹配文档中具有att属性且其中一个值为val,或者以val开头紧随其后的是连字符的E元素 语法: E[att|=

  • jquery表格内容筛选实现思路及代码

    复制代码 代码如下: 筛选:<input type="text" id="sea" /> <table width="100%" id="se"> <thead> <tr><th></th><th>姓名</th><th>性别</th><th>地址</th></tr> <

  • jquery遍历筛选数组的几种方法和遍历解析json对象

    jquery grep()筛选遍历数组 复制代码 代码如下: $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); for(var i=0;i<filterarray.length;i++){ alert(filterarray[i]); } for (key in filtera

  • jquery遍历数组与筛选数组的方法

    grepgrep()方法用于数组元素过滤筛选 grep(array,callback,invert)array:待过滤数组;callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第一个是当前数组元素的值,一个是当前数组元素的下标,即元素索引值.此函数应返回一个布尔值.另外,此函数可设置为一个字符串,当设置为字符串时,将视为"lambda-form"(缩写形式?),其中 a 代表数组元素,i 代表元素索引值.如"a > 0"代表"f

随机推荐