jquery表格内容筛选实现思路及代码
筛选：<input type="text" id="sea" />
<table width="100%" id="se">
<thead>
<tr><th></th><th>姓名</th><th>性别</th><th>地址</th></tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td colspan="3">一班</td></tr>
<tr class="child_row_01"><td></td><td>大爷</td><td>男10</td><td>武汉1</td></tr>
<tr class="child_row_01"><td></td><td>大爷</td><td>男9</td><td>武汉2</td></tr>
<tr class="child_row_01"><td></td><td>大爷</td><td>男8</td><td>武汉3</td></tr>
<tr class="parent" id="row_02"><td colspan="3">二班</td></tr>
<tr class="child_row_02"><td></td><td>大爷</td><td>男7</td><td>武汉4</td></tr>
<tr class="child_row_02"><td></td><td>大爷</td><td>男6</td><td>武汉5</td></tr>
<tr class="child_row_02"><td></td><td>大爷</td><td>男5</td><td>武汉6</td></tr>
<tr class="child_row_02"><td></td><td>大爷</td><td>男4</td><td>武汉7</td></tr>
<tr class="parent" id="row_03"><td colspan="3">三班</td></tr>
<tr class="child_row_03"><td></td><td>大爷</td><td>男3</td><td>武汉8</td></tr>
<tr class="child_row_03"><td></td><td>大爷</td><td>男2</td><td>武汉9</td></tr>
<tr class="child_row_03"><td></td><td>大爷</td><td>男1</td><td>武汉10</td></tr>
</tbody>
</table>
<script type="text/javascript" >
$(function(){
$("#sea").keyup(function(){
$("#se tbody tr").hide().filter(":contains('"+$(this).val()+"')").show();
}).keyup();
});
</script>
// jquery表格内容筛选
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../css/jquery-1.6.2.js"></script>
<script>
$(function(){
$('tr.parent').click(function(){
$(this).toggleClass("selected").siblings('.child_'+this.id).toggle();
});
});
</script>
<style>
.selected{background:red};
</style>
<title>Untitled Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row_01">
<td colspan="2">人力部</td>
</tr>
<tr class="child_row_01">
<td >脚本</td>
<td>20</td>
</tr>
<tr class="child_row_01">
<td >脚本</td>
<td >20</td>
</tr>
<tr class="child_row_01">
<td >脚本</td>
<td >20</td>
</tr>
<tr class="parent" id="row_02">
<td colspan="2">技术部</td>
</tr>
<tr class="child_row_02">
<td >脚本</td>
<td >20</td>
</tr>
<tr class="child_row_02">
<td >脚本</td>
<td >20</td>
</tr>
<tr class="child_row_02">
<td >脚本</td>
<td >20</td>
</tr>
</tbody>
</table>
</body>
</html>
相关推荐
-
jquery遍历筛选数组的几种方法和遍历解析json对象
jquery grep()筛选遍历数组 复制代码 代码如下: $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); for(var i=0;i<filterarray.length;i++){ alert(filterarray[i]); } for (key in filtera
-
JQuery筛选器全系列介绍
1.选择对象 1).基本 ·#id 根据给定的ID匹配一个元素.例如:$("#id")·element 根据给定的元素名匹配所有元素.例如:$("div")·.class 根据给定的类匹配元素.例如:$(".style1");·* 匹配所有元素.例如:$("*")·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回.例如:$("#id,div,.style1"
-
jquery实现多条件筛选特效代码分享
本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下: jquery实现的多条件搜索表单带日期选择表格表单效果源码,是一段实现了多个条件筛选搜索的特效代码,多条件拥有时间.地点.酒店位置及酒店名称等选项,同时在时间的输入表格中拥有时间选择功能,是一款非常实用的特效代码,值得大家学习. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,
-
jQuery多条件筛选如何实现
本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下: 我们在电商平台购买商品时,在商品列表页根据品牌.款式.价格范围等条件进行筛选查询,当点击某个条件时,在页面上会显示用户所选择的条件集合,并且将对应的符合条件的商品信息展示出来.那么今天我们使用jQuery来实现这一前端效果. 运行效果图: HTML 首先,我们将查询条件分类,在页面中布置条件容器li.select-list和已选择的条件容器div.select-result. <ul class="select
-
jquery遍历数组与筛选数组的方法
grepgrep()方法用于数组元素过滤筛选 grep(array,callback,invert)array:待过滤数组;callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第一个是当前数组元素的值,一个是当前数组元素的下标,即元素索引值.此函数应返回一个布尔值.另外,此函数可设置为一个字符串,当设置为字符串时,将视为"lambda-form"(缩写形式?),其中 a 代表数组元素,i 代表元素索引值.如"a > 0"代表"f
-
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
复制代码 代码如下: <script> var value = "teset"; var s = new RegExp(value, "i")//I 表示不区分大小写(可省略) $(".lico").each(function (i, n) { //lico为所有li列表的class名 遍历 if (s.test($(n).text())) //筛选成功
-
jQuery筛选器children()案例详解(图文)
jQuery的选择包含两种,一种是选择器,一种是筛选器.筛选器是对选择器选定的jQuery对象做进一步选择. children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子. 完整的格式如下: 复制代码 代码如下: .children(expr) 其中children是筛选器的名称,expr是表达式,所有选择器中的表达式都可以用在这,比如按标签名"div",按类名".class",按序号":first"等等,如果表达式为空,那么返
-
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JquerySort.aspx.cs" Inherits="demo_JquerySort" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www
-
分类解析jQuery选择器
基本选择器: #id 根据Id匹配一个元素 .class 根据给定的类名匹配一个元素 element 根据元素名匹配一个元素 * 匹配所有元素 selecttor1,selector2 并集,返回两个选择器匹配到的元素 层次选择器: ancestor descendant 根据祖先匹配所有的后代元素 parent>child 根据父元素匹配所有的子元素,直接后代 prev+next 匹配下一个兄弟元素 相当于next()方法 prev~siblings 匹配后面的兄弟元素 相当
-
在jQuery中 关于json空对象筛选替换
Requirement: 一个json object,并且可能包含一些空值或者空字符串,在页面显示的时候希望遇到空值显示"N/A",但是有一部分值是允许空值的.因此希望通过筛选将空值设为"N/A".例如希望学生的"age"和"score"如果为空显示"N/A",而"sex"或者"comment"为空则不做处理. 复制代码 代码如下: var student = {