基于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 相关文章推荐
JavaScript 监听textarea中按键事件
Oct 08 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 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即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
JavaScript中获取元素索引的函数
2010/09/10 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang