基于jQuery实现表格内容的筛选功能


Posted in Javascript onAugust 21, 2016

废话不多说了,直接给大家贴关键代码了。具体代码如下所示:

<html>
 <head>
 <title>表格内容的筛选</title>
  <link type="text/css" rel="stylesheet" href="css/contains.css" />
  <style type="text/css">
table {
  width: 50%;
  border: 1px solid;
  background-color: #8FBC8F;
}
thead tr th {
  text-align: left;
  border-bottom: 1px solid;
}
</style>
  <script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $('#filterName').keyup(function(){
        $('table tbody tr').hide()
          .filter(":contains('" +($(this).val()) + "')").show();
      }).keyup();//DOM加载完时,绑定事件完成之后立即触发
    });
  </script>
 </head>
 <body>
   筛选<input type="text" id="filterName"/>
  <table>
    <thead>
      <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
    </thead>
    <tbody>
      <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
      <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
      <tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>
      <tr><td>赵六</td><td>男</td><td>浙江温州</td></tr>
      <tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
      <tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
      <tr><td>张八</td><td>男</td><td>浙江宁波</td></tr>
      <tr><td>李逵</td><td>女</td><td>浙江杭州</td></tr>
      <tr><td>王进</td><td>男</td><td>湖南长沙</td></tr>
      <tr><td>赵凯</td><td>男</td><td>浙江温州</td></tr>
      <tr><td>Rick</td><td>男</td><td>浙江杭州</td></tr>
      <tr><td>Micle</td><td>女</td><td>浙江杭州</td></tr>
    </tbody>
  </table>
 </body>
</html>

效果图:

输入前:

基于jQuery实现表格内容的筛选功能

输入后:

基于jQuery实现表格内容的筛选功能

以上所述是小编给大家介绍的基于jQuery实现表格内容的筛选功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
jQuery简单实现日历的方法
May 04 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 Javascript
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
jQuery Easyui快速入门教程
Aug 21 #Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 #Javascript
Javascript发送AJAX请求实例代码
Aug 21 #Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 #Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 #Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 #Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 #Javascript
You might like
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
js中call与apply的用法小结
2013/12/28 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
JavaScript实现随机点名程序
2020/03/25 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python中kmeans聚类实现代码
2018/02/23 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
Python unittest单元测试框架总结
2018/09/08 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
三星法国官方网站:Samsung法国
2019/10/31 全球购物
销售经理工作职责
2014/02/03 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
家长对老师的评语
2014/04/18 职场文书
党的作风建设心得体会
2014/10/22 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
捐助倡议书
2015/01/19 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
夫妻吵架保证书
2015/05/08 职场文书
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android