jquery如何实现一个表格的筛选,也就是按条件查找筛选

使用jquery的each()方法遍历单元格，如果满足条件则进行相应的操作

成都创新互联成都网站建设按需定制开发，是成都网站推广公司,为玻璃钢雕塑提供网站建设服务,有成熟的网站定制合作流程，提供网站定制设计服务：原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站建设热线：13518219792

$(selector).each(function(index,element))

实例演示：在表格中按姓名查找记录，找到则突出显示，否则给出提示

创建Html元素

div class="box"

span实例演示：在表格中按姓名查找记录/spanbr

div class="content"

姓名:nbsp;input type="text" name="name"nbsp;input type="button" value="查找"

table

trtd张三/tdtd175/tdtd140/td/tr

trtd李四/tdtd170/tdtd120/td/tr

trtd王五/tdtd185/tdtd160/td/tr

/table

/div

/div

设置css样式

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

div.boxspan{color:#999;font-style:italic;}

div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

input[type='text']{width:100px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}

input[type='button']{height:30px;margin:10px;padding:5px 10px;}

table{border-collapse:collapse;}

td{width:80px;height:30px;line-height:30px;text-align:center;border:1px solid green;}

.selected{font-weight:bold !important; background: #ff99cc !important;color:#fff;}

编写jquery代码

$(function(){ 

$(":button").click(function() {

$("table tr").removeClass('selected');   // 还原样式

name = $("input[name='name']").val();    // 要查找的名字

flag = true;                             // 表示未查到目标

$("table tr").find("td:first").each(function() {

if($(this).html()==name){            // 如果找到了

$(this).parent("tr").addClass('selected');    // 为整行设置样式

flag = false;                    // 将未找到标记设为false

return false;                    // 提前终止循环

}

});

if(flag)                                 // 如果没找到就给出提示

alert("查无此人");  

});

});

观察效果

如果表中有相应记录

如果表中并无相应记录

Jquery实战

Jquery实战

基本的CSS选择器

熟悉web开发的人员一定对css的选择功能相当的了解，通过css选择功能，我们可以在css样式文件里轻松的将样式应用到选择的页面元素上。jQuery也正是采用了这样的机制，使jQuery的元素选择能力易常强大。

a——选择所有元素

#specialID——选择匹配id为specialID的元素

.specialClass——选择匹配拥有css类sepcialClass的元素

a#specialID.specialClass——选择匹配id为specialID、有用css类specialClass的元素

p a.specialClass——匹配拥有css类specialClass、在

元素内的元素

除了支持传统的css选择器，Jquery还支持CSS3选择功能。

子节点选择器

$("p a") 选择元素

的直接子节点的元素，非直接子节点的元素将不会被选择到

特性选择器

特性选择器在匹配的选择元素上过滤满足某特性(属性)的元素

如我们需要做如下的'选择：匹配所有指向本网站之外地址的链接，我们可以这样选择

$("a[href^=http://") 该选择器选择具有href属性，且href属性值以http://开始的链接元素

特性选择的语法是：

选择具有某特性(属性)的元素

form[method]

选择具有某特性，且属性值为指定值的元素

input[type=text]

选择匹配特性以特定字符开头的元素

div[title^=my] ——选择匹配title特性值已my开头的所有div元素

选择匹配特性以特定字符结束的元素

a[href$=.pdf] ——选择引用了pdf文件的所有链接元素

其他

a[href*=jquery.com]选择引用jQuery网站的所有链接元素

过滤符

通过过滤符选择器可以在已选择的元素中过滤出需要的元素，上面的特性选择器也属于过滤符，另外还有“:”字符

如：

li:has(a)—— 选择匹配包含元素的所有

元素

1. 基础过滤符：

:first：匹配多个对象中的第一个对象

:last：匹配多个对象中的最后一个对象

:not(selector)：匹配去除了not后面选择符中内容的项，not中的selector只能是过滤选择器，不能是查找选择器

:even：匹配所有对象中的第偶数个

:odd：匹配所有对象中的第奇数个

:eq(index)：匹配某一下表的单独某元素

:gt(index)：匹配大于某一下标的所有元素

:lt(index)：匹配小于某一下标的所有元素

:header：匹配所有的header元素，例如h1,h2,h3,h4,h5,h6

:animated：匹配所有有动画效果的元素

2. 内容过滤符：

:contains(text)：匹配内部拥有该文本元素的对象，包含间接有用的情况

:empty：匹配所有没有子元素的对象

:has(selector)：匹配所有至少含有一个子选择符的对象

:parent：匹配元素，这些元素包含子元素（包括文本元素）

3. 可见性过滤符：

:hidden：匹配所有隐藏对象，或者input中的hidden类型

:visible：匹配所有可见的对象

4. 子过滤符：

:nth-child(index/even/odd/equation)：匹配子元素中的某一下标/偶数/奇数/等式的对象，:eq(index)只能匹配某单一对象的子元素特征，而这个方法可以匹配多个对象的某一子元素共同特征 nth-child过滤器，从1开始计数，这主要是与css标准兼容。

:first-child：匹配第一个子元素

:last-child：匹配最后一个子元素

这两个匹配符也可以对多个父对象的所有子元素进行匹配操作

:only-child：如果一个父元素只有一个子元素，就匹配这个子元素

5. 表单过滤符

:input ：匹配表单内input元素

:text ：匹配表单内input type为text的元素

:password ：匹配表单内input type为password的元素

:radio ：匹配表单内input type为radio的元素

:checkbox ：匹配表单内input type为checkbox的元素

:submit ：匹配表单内input type为submit的元素

:image ：匹配表单内image的元素

:reset ：匹配表单内input type为reset的元素

:button ：匹配表单内input type为button的元素

:file ：匹配表单内input type为file的元素.

:hidden ：匹配表单内input type为hidden的元素或者hidden区域

:enabled ：匹配所有启用元素

:disabled ：匹配所有非启用元素

:checked ：匹配所有选中元素

:selected ：匹配所有下拉列表选中元素

查找选择器和筛选选择器的概念区别

为了能灵活的使用jQuery,认清查找选择器、筛选选择器之间的区别是非常重要的。筛选选择器，通过对元素应用更高的选择标准（如过滤特性或或其他相关值），缩小正在匹配的元素的集合；查找选择器，比如后代选择器（空格）、子节点选择器（）以及兄弟节点选择器（+）等，则查找与已选择元素具有某种关系的其他元素，而不是通过把标准应用于已匹配元素来限制匹配范围。 ;

jquery的筛选有哪些

jQuery提供了强大的选择器让我们获取对象。在这边，我人为地将jQuery选择器分为两大部分：选择对象和筛选条件。选择对象表示要获取什么对象，筛选条件是对获取的对象进行筛选，最终留下符合某些特征的对象

1.选择对象

1).基本

·#id 根据给定的ID匹配一个元素。例如：$("#id")

·element 根据给定的元素名匹配所有元素。例如：$("div")

·.class 根据给定的类匹配元素。例如：$(".style1");

·* 匹配所有元素。例如：$("*")

·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。例如：$("#id,div,.style1")

2).表单

·:button 匹配所有按钮。例如：$(":button")

·:checkbox 匹配所有复选框。例如：$(":checkbox")

·:file 匹配所有文件域。例如：$(":File")

·:hidden 匹配所有不可见元素，或者type为hidden的元素。例如：$("input:hidden")

·:image 匹配所有图像域。例如：$(":image")

·:input 匹配所有 input, textarea, select 和 button 元素。例如：$(":input")

·:password 匹配所有密码框。例如：$(":password")

·:radio 匹配所有单选按钮。例如：$(":radio")

·:reset 匹配所有重置按钮。例如：$(":reset")

·:submit 匹配所有提交按钮。例如：$(":submit")

·:text 匹配所有的单行文本框。例如：$(":text")

·:header 匹配如 h1, h2, h3之类的标题元素。例如：$(":header").css("background", "#EEE");

2.筛选条件

1).属性筛选

·[attribute*=value] 匹配给定的属性是以包含某些值的元素。例如：$("input[name*='man'")

·[attribute!=value] 匹配所有含有指定的属性，但属性不等于特定值的元素。例如：$(input[name!='man');

·[attribute$=value] 匹配给定的属性是以某些值结尾的元素。例如：$("input[name$='man']")

·[attribute=value] 匹配给定的属性是某个特定值的元素。例如：$("input[name='man']");

·[attribute] 匹配包含给定属性的元素。例如：$("div[id]")

·[attribute^=value] 匹配给定的属性是以某些值开始的元素。例如：$("input[name^='man']")

·[selector1][selector2][selectorN] 同时满足多个条件。例如：$("input[id][name$='man']")

·:hidden 匹配所有的不可见元素。例如：$("tr:hidden")

·:visible 匹配所有的可见元素。例如：$("tr:visible")

·:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)。例如：$("input:checked")

·:disabled 匹配所有不可用元素。例如：$("input:disabled")

·:enabled 匹配所有可用元素。例如：$("input:enabled")

·:selected 匹配所有选中的option元素。例如：$("select option:selected")

2).内容筛选

·:contains(text) 匹配包含给定文本的元素。例如：$("div:contains('John')")

·:empty 匹配所有不包含子元素或者文本的空元素。例如：$("td:empty")

·:has(selector) 匹配含有选择器所匹配的元素的元素。例如：$("div:has(p)");

·:parent 匹配含有子元素或者文本的元素。例如：$("td:parent")

3).层级筛选

·ancestor descendant 在给定的祖先元素下匹配所有的后代元素。例如：$("form input")

·parent child 在给定的父元素下匹配所有的子元素。例如：$("form input")

·prev + next 匹配所有紧接在 prev 元素后的 next 元素。例如：$("label + input")

·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如：$("form ~ input")

·:first-child 匹配第一个子元素。例如：$("ul li:first-child")

·:last-child 匹配最后一个子元素。例如：$("ul li:last-child")

·:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素。例如：$("ul li:nth-child(2)")

·:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配。例如：$("ul li:only-child")

4).方法筛选

·:animated 匹配所有正在执行动画效果的元素。例如：$("div:animated");

·:eq(index) 匹配一个给定索引值的元素。例如：$("tr:eq(1)")

·:even 匹配所有索引值为偶数的元素，从 0 开始计数。例如：$("tr:even")

·:first 匹配找到的第一个元素。例如：$("tr:first")

·:gt(index) 匹配所有大于给定索引值的元素，从 0 开始计数。例如：$("tr:gt(0)")

·:last 匹配找到的最后一个元素。例如：$("tr:last")

·:lt(index) 匹配所有小于给定索引值的元素。例如：$("tr:lt(2)")

·:not(selector) 去除所有与给定选择器匹配的元素。例如：$("input:not(:checked)")

·:odd 匹配所有索引值为奇数的元素，从 0 开始计数。例如：$("tr:odd")

网站栏目：jquery筛选,下面哪种不属于jquery的筛选
当前网址：http://azwzsj.com/article/dsgjssd.html