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

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

May 16, 2016 pm 06:22 PM
jquery 筛选

效果图:
基于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文件库,呵呵。
作者:破  浪
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

excel同时筛选3个以上关键词怎么操作 excel同时筛选3个以上关键词怎么操作 Mar 21, 2024 pm 03:16 PM

在日常办公中经常使用Excel来处理数据,时常遇到需要使用“筛选”功能。当我们在Excel中选择执行“筛选”时,对于同一列而言,最多只能筛选两个条件,那么,你知道excel同时筛选3个以上关键词该怎么操作吗?接下来,就让小编为大家演示一遍。第一种方法是将条件逐步添加到筛选器中。如果要同时筛选出三个符合条件的明细,首先需要逐步筛选出其中一个。开始时,可以先根据条件筛选出姓“王”的员工。然后单击【确定】,接着在筛选结果中勾选【将当前所选内容添加到筛选器】。操作步骤如下所示。  同样,再次分别执行筛选

Excel表格中明明有数据但筛选空白怎么办? Excel表格中明明有数据但筛选空白怎么办? Mar 13, 2024 pm 06:38 PM

  Excel表格是一款是很经常使用的办公软件,很多用户都会在表格中记录下各种数据,但是表格明明有数据单筛选是空白,关于这个问题,很多用户都不知道要怎么解决,没有关系,本期软件教程内容就来为广大用户们进行解答,有需要的用户欢迎来查看解决方法吧。  Excel表格中明明有数据但筛选空白怎么办?  第一种原因,表格中含有空行  我们要筛选所有姓“李”的人,但可以看到并没有筛选出正确的结果,因为表格中含有空行,这种情况如何处理呢?  解决方法:  步骤一:选中所有的内容再进行筛选  按c

word筛选重复内容的方法 word筛选重复内容的方法 Mar 19, 2024 pm 07:01 PM

一说到筛选重复内容,大家可能首先想到的就是excel里对数值进行筛选,其实在word里我们也可以给文档中重复的文字进行筛选。当你不确定自己是不是某个字打错了,可以使用筛选看一看,这一步骤操作起来很方便。下面小编就来带领大家一起学习word筛选重复内容的方法,想要学习的小伙伴们快来认真学习吧!1.首先,我们把自己想要筛选的word文档在电脑上打开,如下图所示。2.然后,我们选中自己想要查找的这段文字,如下图红色箭头指向所示。3.按住键盘上的【ctrl+H】,调出查找和替换命令,如下图红色箭头指向所

jQuery中如何使用PUT请求方式? jQuery中如何使用PUT请求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式?在jQuery中,发送PUT请求的方法与发送其他类型的请求类似,但需要注意一些细节和参数设置。PUT请求通常用于更新资源,例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先,确保引入了jQuery库文件,然后可以通过以下方式发送PUT请求:$.ajax({u

wps筛选如何设置并进行操作? wps筛选如何设置并进行操作? Mar 20, 2024 pm 09:51 PM

在使用wps表格的时候,我们有时会把各类型的数据都列在一个表格里,根据需要我们还要挑选符合要求的数据进行应用,一点一点挑选,大大的降低了工作效率,如果可以利用一些软件功能进行选择,那就方便了很多,wps筛选功能可以实现这个操作,一起看看下边的操作分享。1、首先在电脑上打开需要筛选的数据(如下图)  2、首先选中表头并点击“开始”(如下图)。  3、接着点击“筛选”(如下图)。  4、然后会发现表头后面有一个倒三角,点击“数学”后面的倒三角(如下图)。  5、接着会弹出筛选选项,如点击“数字筛选”

Excel表格不能筛选的解决办法 Excel表格不能筛选的解决办法 Mar 14, 2024 am 10:20 AM

  在日常生活,发现Excel表格无法筛选了,怎么办?Excel是最常用的数据处理工具之一,帮助用户简单快速的完成数据录入和整理,为了让用户能够顺利使用Excel,下面就来看看Excel表格筛选不了的解决办法。  1、首先打开Excel文档,点击菜单中的【视图】选项。  2、点击工具栏中的【冻结窗口】选项。  3、然后在打开的选项中,将冻结设置取消。  4、取消后即可重新进行筛选。

jQuery如何移除元素的height属性? jQuery如何移除元素的height属性? Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height属性?在前端开发中,经常会遇到需要操作元素的高度属性的需求。有时候,我们可能需要动态改变元素的高度,而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性,并提供具体的代码示例。在使用jQuery操作高度属性之前,我们首先需要了解CSS中的height属性。height属性用于设置元素的高度

jQuery小技巧:快速修改页面所有a标签的文本 jQuery小技巧:快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题:jQuery小技巧:快速修改页面所有a标签的文本在网页开发中,我们经常需要对页面中的元素进行修改和操作。在使用jQuery时,有时候需要一次性修改页面中所有a标签的文本内容,这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本,同时给出具体的代码示例。首先,我们需要引入jQuery库文件,确保在页面中引入了以下代码:&lt

See all articles