jQuery实现页面中表格数据的搜索
更新:2021-02-08 10:42:39
人气:1310
来源:互联网转载
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>
推荐的文章
随手记
- ● blob:http地址的原理及生成方法
- ● 华视CVR100系统身份证读卡器web驱动安装不识别解决办法
- ● web应用采用webcam实现拍照上传的PHP示例及参数说明
- ● PHP实现直播推流功能
- ● win10开机后屏幕黑屏只有鼠标但能启动任务管理器
- ● base64.js文件下载及使用方法说明
- ● windows利用bat微信双开、多开
- ● 百度API提交推送报{"error":401,"message":"tokenisnotvalid"}什么原因
- ● 如果在调用创建群接口时没有保存OpenConversationId,可以通过调用本接口通过chatId获取OpenConversationId
- ● Windows中使用BAT文件设置指定IP地址或自动获取IP
PHP经验分享
- ● MySQLSUM在没有符合查询条件时返回结果为空的处理办法
- ● 如何开启PHP8的JIT提升运行速度
- ● 钉钉API接口-用PHP+Curl实现获取用户信息
- ● 钉钉API接口-用PHP+Curl实现获取应用Access_Token
- ● 在PHP中使用CURL,“撩”服务器只需几行——phpcurl详细解析和常见大坑
- ● MySQLInnodb并发涉及参数说明
- ● mysql参数调优之innodb_thread_concurrency、innodb_concurrency_tickets合理的使用cpu性能
- ● PHP用fsockopen检测指定IP端口是否开启可用
- ● PHP用socket检测服务器IP端口是否开放?代码示例
- ● GatewayWorker报错:Waring:Events::onMessageisnotcallable