jQuery实现页面中表格数据的搜索
更新：2021-02-08 10:42:39
人气：213
来源：互联网转载
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
随手记
- ● Apache（httpd）出现“读取描述失败。错误代码：2”问题的记录
- ● Mysql的Sql_mode设置（Incorrectdatetimevalue:'0000-00-0000:00:00'forcolumn）
- ● InternalServerError错误和.htaccess伪静态的关系
- ● Google谷歌访问助手百度云分享下载及安装方法说明
- ● PHP如何获取指定网址的header头信息及隐藏关闭的方法
- ● 去掉EasyPlayer播放器水印LOGO“tsingsee”的方法
- ● easy-player-element.min.js使用示例及百度云盘下载
- ● html使用EasyWasmPlayer.js示例方法及百度网盘下载地址
- ● 谷歌广告联盟（GoogleAdsense）申请通过了，可服务器在哪？
- ● PHP支持的版本及各版本最终支持时间
PHP经验分享
- ● PHP利用ffmpeg截图视频封面或截取一段gif动画图片
- ● PHP利用ffmpeg处理视频相关命令记录
- ● PHP允许JS（xmlHttp）、AJAX跨域的设置方法
- ● php远程网络唤醒计算机及WOL唤醒魔术包格式原理
- ● FatalErrorBaseaddressmarksunusablememoryregion解决办法
- ● 关于PHP7不支持curl的解决方法
- ● PHP在浏览器中发出CMD指令执行Windows电脑关机、重启
- ● PHP接收$_POST表单值为字符串或数组时，对安全转义的处理函数
- ● PHP+MYSQL多个字段插入或修改数据库时的简便方法
- ● 关联数组循环输出及根据键名输出键值有用法
本站PHP博客源代码下载
本站使用的PHP博客系统采用PHP和MySql开发，程序开发完全是因为个人爱好，是自己纯手写PHP源代码，未采用任何PHP框架，现已免费开源共享提供给大家下载！
联系博主
