目录
效果
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--jQuery-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
table {
border:0;
}
p {
font:normal 12px/17px Arial;
}
td {
font:normal 12px/17px Arial;
padding:2px;
width:100px;
}
th {
font:bold 12px/17px Arial;
text-align:left;
padding:4px;
border-bottom:1px solid #333;
width:100px;
}
.even {
background:#FFF38F;
}
/* 偶数行样式*/
.odd {
background:#FFFFEE;
}
/* 奇数行样式*/
.selected {
background:#FF6500;
color:#fff;
}
</style>
</head>
<body>
<p>
<br> 筛选：
<input id="filterName" name="filterName">
<span class="search">搜索</span>
<br>
</p>
<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td>SYJ</td><td>男</td><td>河北秦皇岛市</td></tr>
<tr><td>李四</td><td>女</td><td>北京北京市</td></tr>
<tr><td>王五</td><td>男</td><td>河北秦皇岛市</td></tr>
<tr><td>赵六</td><td>男</td><td>河北唐山市</td></tr>
<tr><td>张三</td><td>男</td><td>内蒙古呼和浩特市</td></tr>
<tr><td>楠楠</td><td>女</td><td>内蒙古包头市</td></tr>
<tr><td>贝贝</td><td>男</td><td>北京北京市</td></tr>
<tr><td>西西</td><td>女</td><td>河北秦皇岛市</td></tr>
<tr><td>冬冬</td><td>男</td><td>东北辽宁省</td></tr>
</tbody>
</table>
<!--排序函数-->
<script type="text/javascript">
$(function() {
$('.search').on('click', function() {
// console.log($('#filterName').val());
$('table tbody tr').hide()
.filter(":contains('" + ($('#filterName').val()) + "')")
.show();
})
})
</script>
</body>
</html>
代码详解
- html搜索框部分
<p>
<br> 筛选：
<input id="filterName" name="filterName">
<span class="search">搜索</span>
<br>
</p>
- js部分
<script type="text/javascript">
$(function() {
$('.search').on('click', function() {
// console.log($('#filterName').val());
$('table tbody tr').hide()
.filter(":contains('" + ($('#filterName').val()) + "')")
.show();
})
})
</script>
jQuery on() 方法
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。
该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。
语法
$(selector).on(event,childSelector,data,function)
参数
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。
由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序
（且不是选择器本身，比如已废弃的 delegate() 方法）。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。
Example：
$(document).ready(function(){
$("p").on("click",function(){
alert("段落被点击了。");
});
});
jQuery 效果 - hide() 方法
语法：
$(selector).hide(speed,callback)
参数：
speed 可选。规定元素从可见到隐藏的速度。默认为 "0"。
可能的值：
毫秒 （比如 1500）
"slow"
"normal"
"fast"
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
callback 可选。hide 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。
Example：
$(".btn1").click(function(){
$("p").hide();
});
JavaScript Array filter() 方法
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
语法
array.filter(function(currentValue,index,arr), thisValue)
参数说明
function(currentValue, index,arr) 必须。函数，数组中的每个元素都会执行这个函数
函数参数:
currentValue 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"
Example
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
jQuery 效果 show() 方法
show() 方法显示隐藏的被选元素。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素
（不适用于通过 visibility:hidden 隐藏的元素）。
提示：如需隐藏元素，请查看 hide() 方法。
语法
$(selector).show(speed,easing,callback)
参数
speed 可选。规定显示效果的速度。
easing 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。
可能的值：
"swing" - 在开头/结尾移动慢，在中间移动快
"linear" - 匀速移动
callback 可选。show() 方法执行完之后，要执行的函数。
jQuery.contains()方法
https://www.runoob.com/jquery/misc-contains.html
$.contains( container, contained )
参数
container Element类型 指定可能包含其他元素的祖辈容器元素。
contained Element类型 指定可能被其他元素包含的后代元素。
另一种写法
$(function() {
$("#Text1").keyup(function() {
var filterText = $(this).val();
$("#<%=GridView1.ClientID %> tr").not(":first")
.hide()
.filter(":contains('" + filterText + "')")
.show();;
}).keyup();
})
JQuery的选择器：
1：$("#<%=GridView1.ClientID %> tr")选择表格的所有行；/如果使用了别的控件产生的TABEL，可以使用$(“tr”)。
2：not(":first")：除去第一行表头行；
3：filter(":contains(’" + filterText + “’)”):从上面所选择的行里面筛选出行文本中包含filterText 的行显示出来；
4：最后加一句keyup()是为了在提交后重新触发keyup事件。
现在项目需求是匹配表格里某一列的内容，并显示此行，不匹配的不予显示。（类似查询功能）
再一种写法
$("tr").not(":first").each(function(){
if($(this).hide().find("td:eq(2)").text()indexOF(filterText)!=-1){
$(this).show();
}
else
$(this).hide();
});
5883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
