jQuery实现页面中表格数据的搜索
更新：2021-02-08 10:42:39
人气：89
来源：互联网转载
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
随手记
- ● InternalServerError错误和.htaccess伪静态的关系
- ● js实时动态显示PHP服务器时间且不用Ajax循环查询获取的方法
- ● Google谷歌访问助手百度云分享下载及安装方法说明
- ● PHP如何获取指定网址的header头信息及隐藏关闭的方法
- ● 去掉EasyPlayer播放器水印LOGO“tsingsee”的方法
- ● easy-player-element.min.js使用示例及百度云盘下载
- ● html使用EasyWasmPlayer.js示例方法及百度网盘下载地址
- ● 谷歌广告联盟（GoogleAdsense）申请通过了，可服务器在哪？
- ● PHP支持的版本及各版本最终支持时间
- ● 百度Ueditor解决上传图片及附件跨目录及返回路径的方法
PHP经验分享
本站PHP博客源代码下载
本站使用的PHP博客系统采用PHP和MySql开发，程序开发完全是因为个人爱好，是自己纯手写PHP源代码，未采用任何PHP框架，现已免费开源共享提供给大家下载！
联系博主
