首页 > web前端 > js教程 > 基于JQuery的一句代码实现表格的简单筛选_jquery

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

WBOY
发布: 2016-05-16 18:22:31
原创
1134 人浏览过

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

复制代码 代码如下:













DataKeyNames="OrderID" DataSourceID="SqlDataSource1"
HorizontalAlign="Left" PageSize="50" >

SortExpression="OrderID" InsertVisible="False" />
SortExpression="CustomerID" />
SortExpression="EmployeeID" />
SortExpression="OrderDate" />
SortExpression="RequiredDate" />
SortExpression="ShippedDate" />
SortExpression="ShipVia" />
SortExpression="Freight" />


ConnectionString=""
SelectCommand="SELECT top 50 * FROM [Orders]">





 
JQuery代码就:
复制代码 代码如下:

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


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

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

JQuery的选择器的强大之处,让我们能救这么简单的实现客户端的简单筛选。最后加一句关于表格筛选有JQuery插件提供
给我们选择, 但是这种简单的功能,我不会去选择加入一个JavaScript文件库,呵呵。
作者:破  浪
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板