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博客源代码下载
联系博主