表格内容筛选
来源：互联网 发布：软件定义 编辑：程序博客网 时间：2024/05/17 01:29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单应用--表格应用单选框radio</title>
<script src="../jQuery.min/jquery-3.1.1.js" type="text/javascript"></script>
<style>
*{margin: 0 auto}
table{border: 1px solid ;margin-top: 40px ;border-collapse: collapse }
th{width: 100px;height: 40px}
td{text-align: center;line-height: 30px;}
</style>
<script>
$(function() {
$('#filterName').keyup(function(){
$('table tbody tr').hide()
.filter(":contains('" +($(this).val()) + "')").show();
}).keyup(); //DOM加载完时，绑定事件完成之后立即触发
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="3">
筛选:<input type="text" id="filterName">
</th>
</tr>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td>张3</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李4</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王5</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td>赵6</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td>Jason</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>Sara</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>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单应用--表格应用单选框radio</title>
<script src="../jQuery.min/jquery-3.1.1.js" type="text/javascript"></script>
<style>
*{margin: 0 auto}
table{border: 1px solid ;margin-top: 40px ;border-collapse: collapse }
th{width: 100px;height: 40px}
td{text-align: center;line-height: 30px;}
</style>
<script>
$(function() {
$('#filterName').keyup(function(){
$('table tbody tr').hide()
.filter(":contains('" +($(this).val()) + "')").show();
}).keyup(); //DOM加载完时，绑定事件完成之后立即触发
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="3">
筛选:<input type="text" id="filterName">
</th>
</tr>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td>张3</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李4</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王5</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td>赵6</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td>Jason</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>Sara</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>
</body>
</html>
1 0
- jquery表格内容筛选
- jquery表格内容筛选
- JQ---表格内容筛选
- 表格内容筛选
- jQuery表格内容筛选
- jquery实现表格内容筛选
- 筛选表格内容，查找表格内容，查找记录，查找数据
- 5.2.3: jQuery的表格内容筛选
- EXCEL复制筛选内容
- python：文件内容筛选
- awk处理筛选内容
- Excel表格高级筛选教程
- Jquery中筛选表格数据
- JQuery筛选选择器之内容筛选
- JavaFile筛选读取文件内容
- Execl表格列数据筛选及替换！
- GridView表格抬头列值复选筛选
- angular表格带筛选分页，本地json
- 数据库同步
- 实现足够大List<int>剔除重复的数字
- can’t refactor code used in this language
- MySQL存储过程decimal得到值为0.00问题
- What exactly is copy-on-modify semantics in R, and where is the canonical source?
- 表格内容筛选
- 2017gmic大会|倒计时3天（文末有彩蛋）
- 大型网站技术架构-网站高性能架构-记录
- windows调用另外一个EXE程序，WinExec+Cmd+BAT
- JSP页面，脚本标签
- Android 引导页功能
- 代码块
- 使用Math.max和Math.min求数组的最大值和最小值
- iOS 【语音合成的集成和使用几点建议】
