基于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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
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
PHP基于单例模式实现的mysql类
2016/01/09 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
JS实现商品倒计时实现代码
2013/05/03 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
基本DOM节点操作
2017/01/17 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Python PyQt5整理介绍
2020/04/01 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
写给老师的表扬信
2014/01/21 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
教职工代表大会主持词
2014/04/01 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
会计求职自荐信范文
2015/03/04 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL