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

Javascript 相关文章推荐
用javascript实现读取txt文档的脚本
Jul 20 Javascript
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
js添加事件的通用方法推荐
May 15 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
详解http访问解析流程原理
Oct 18 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
vue vant中picker组件的使用
Nov 03 Javascript
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
You might like
php 发送带附件邮件示例
2014/01/23 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
javascript 获取图片颜色
2009/04/05 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
python Tkinter版学生管理系统
2019/02/20 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
python批量生成条形码的示例
2020/10/10 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
Python 求向量的余弦值操作
2021/03/04 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
总经理岗位职责描述
2014/02/08 职场文书
小学生学习感言
2014/03/10 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
老公婚前保证书
2015/02/28 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
python 实现图片特效处理
2022/04/03 Python