jQuery实现页面中表格数据的搜索
更新：2021-02-08 10:42:39
人气：399
来源：互联网转载
A+
jQuery页面搜索一个表格，将搜索到的行保存，其余行隐藏。
HTML代码：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>jQuery实现页面表格数据的搜索</title>
<script src="js/jquery.min.js">
</script>
<script>
$(function() {
$("#search").click(function() {
var txt = $("#searchName").val();
if ($.trim(txt) != "") {
$("table tr:not('#theader')").hide();
$("table tr:not('#theader')").filter(":contains('" + txt + "')").show();
} else {
$("table tr:not('#theader')").show();
}
});
})
</script>
</head>
<body>
<div class="table">
<table>
<tr id="theader">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>女</td>
<td>16</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>36</td>
</tr>
<tr>
<td>孙七</td>
<td>女</td>
<td>45</td>
</tr>
<tr>
<td>赵八</td>
<td>女</td>
<td>34</td>
</tr>
</table>
<input type="text" id="searchName"/>
<input type="button" value="搜索" id="search"/>
</div>
</body></html>
推荐的文章
Ads by Google
随手记
PHP经验分享
- ● PHP使用AES加密解密的方法实例
- ● 前端用$.ajax的post方法传JSON数据，后端PHP解析数据示例
- ● PHP利用ffmpeg截图视频封面或截取一段gif动画图片
- ● PHP利用ffmpeg处理视频相关命令记录
- ● PHP允许JS（xmlHttp）、AJAX跨域的设置方法
- ● php远程网络唤醒计算机及WOL唤醒魔术包格式原理
- ● FatalErrorBaseaddressmarksunusablememoryregion解决办法
- ● 关于PHP7不支持curl的解决方法
- ● PHP在浏览器中发出CMD指令执行Windows电脑关机、重启
- ● PHP接收$_POST表单值为字符串或数组时，对安全转义的处理函数
本站PHP博客源代码下载
本站使用的PHP博客系统采用PHP和MySql开发，程序开发完全是因为个人爱好，是自己纯手写PHP源代码，未采用任何PHP框架，现已免费开源共享提供给大家下载！
联系博主
