Heim > Web-Frontend > js-Tutorial > 基于JQuery的一句代码实现表格的简单筛选_jquery

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

WBOY
Freigeben: 2016-05-16 18:22:31
Original
1136 Leute haben es durchsucht

效果图:
基于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文件库,呵呵。
作者:破  浪
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage