初级版本：

  • 输入框可检索，空格检索忽略
  • radio点击后会过滤
  • 最后的两个输入框可根据age范围检索过滤
  • 三个单独的功能，不能协同工作
 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width">

   <title>JS Bin</title>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 </head>

 <body>

 <div class="container">

   <input type="text" id="search-input" placeholder="Search for names..">

   <div class="radio-container">

     <input type="radio" name="sex" id="all" class="radio-box" value="all" checked/>All

     <input type="radio" name="sex" id="male" class="radio-box" value="Male"/>Male

     <input type="radio" name="sex" id="female" class="radio-box" value="Female"/>Female

   </div>

   <div class="range-container">

     <input type="text" class="range-text" id="min"/>&nbsp;~

     <input type="text" class="range-text" id="max"/>

   </div>

   <table border="1">

     <thead>

       <tr>

       <th width="60%">Name</th>

       <th width="20%">Sex</th>

       <th width="20%">Age</th>

       </tr>

     </thead>

     <tbody>

       <tr>

         <td>Apple Chen</td>

         <td>F</td>

         <td>10</td>

       </tr>

       <tr>

         <td>Ajax Green</td>

         <td>M</td>

         <td>12</td>

       </tr>

       <tr>

         <td>Appe Chen</td>

         <td>M</td>

         <td>14</td>

       </tr>

       <tr>

         <td>Cici Chen</td>

         <td>F</td>

         <td>20</td>

       </tr>

       <tr>

         <td>Lili Black</td>

         <td>F</td>

         <td>24</td>

       </tr>

       <tr>

         <td>Dragon White</td>

         <td>M</td>

         <td>30</td>

       </tr>

       <tr>

         <td>Judy White</td>

         <td>M</td>

         <td>32</td>

       </tr>

       <tr>

         <td>Jack Johns</td>

         <td>M</td>

         <td>41</td>

       </tr>

       <tr>

         <td>Lele Li</td>

         <td>F</td>

         <td>50</td>

       </tr>

     </tbody>

   </table>

   </div>

 </body>

 </html>

HTML

 .container{

   width:212px;

 }

 #search-input{

   width:200px;

   height:25px;

   font-size:16px;

   border-radius:5px;

   outline:none;

   border:none;

   border:1px solid orange;

   padding-left:10px;

 }

 .radio-container{

   width:100%;

   text-align:center;

   margin:10px auto;

   height:20px;

   line-height:20px;

 }

 .range-container{

   width:100%;

   margin:auto;

   text-align:center;

 }

 .range-text{

   width:25px;

   height:26px;

   outline:none;

   border-radius:50%;

   border:none;

   border:1px solid orange;

   padding-left:5px;

 }

 table{

   margin:10px auto;

   width:100%;

   border-collapse: collapse;

   border:none;

   border-top:1px solid;

 }

 td{

   text-align:center;

 }

 tr{

   border-bottom:1px solid #ccc;

 }

 .error{

   background: red;

 }

CSS

JS代码：

 var input=document.getElementById('search-input');

 var trs=document.getElementsByTagName('tr');

 var tds=document.getElementsByTagName('td');

 var chooseMale=document.getElementById('male');

 var chooseFema=document.getElementById('female');

 var chooseAll=document.getElementById('all');

 var minElem=document.getElementById('min');

 var maxElem=document.getElementById('max');

 input.onkeyup=checkName;

 chooseMale.onclick=function(){

   checkSex('M');

 }

 chooseFema.onclick=function(){

   checkSex('F');

 }

 chooseAll.onclick=function(){

   checkSex('A');

 }

 minElem.onblur=function(){

   checkRange(min.value,max.value);

 }

 maxElem.onblur=function(){

   checkRange(min.value,max.value);

 }

 function checkName(){

   var input_str=input.value;

   input_str=trim(input_str);

   for(var i=1;i<trs.length;i++){

     var str=trs[i].getElementsByTagName('td')[0].innerText;

     if(str.toUpperCase().indexOf(input_str.toUpperCase())>-1){

       trs[i].style.display='';

     }

     else{

       trs[i].style.display='none';

     }

   }

 }

 function checkSex(choice){

   for(var i=1;i<trs.length;i++){

     var str=trs[i].getElementsByTagName('td')[1].innerText;

     if(choice!=='A' && (str!==choice || str.toUpperCase()!==choice)){

       trs[i].style.display='none';

     }

     else{

       trs[i].style.display='';

     }

   }

 }

 function checkRange(min,max){

   if(min==="") min=-1

   else min=parseInt(min);

   if(max==="") max=-1

   else max=parseInt(max);

   if(min>max && min!==-1 && max!==-1){

     minElem.classList.add('error')

     maxElem.classList.add('error');

   }

   else{

     minElem.classList.remove('error');

     maxElem.classList.remove('error');

   }

   for(var i=1;i<trs.length;i++){

     var str=trs[i].getElementsByTagName('td')[2].innerText;

     var age=parseInt(str);

     if ( (min!==-1 && max!==-1)&&(age<min || age>max) ||

          (min===-1 && max!==-1)&&(age>max) ||

          (min!==-1 && max===-1)&&(age<min) ) {

       trs[i].style.display='none';

     }

     else{

       trs[i].style.display='';

     }

   }

 }

 function trim(str){

   str=str.replace(/\s+/g,' ');//将所有的空格串替换成一个空格

   str=str.replace(/^\s+|\s+$/g,'');//去两头空格

   return str;

 }

运行结果：

JS filters-table简单过滤-Version 1的更多相关文章

  1. JS filters-ul li简单过滤

    功能要求:在input中输入字母,显示ul li中匹配的元素,隐藏不匹配的 <!DOCTYPE html> <html> <head> <meta chars ...

  2. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  3. jQuery简单过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <!--jQuery选择器详解 根据所获 ...

  4. MVC3.0+knockout.js+Ajax 实现简单的增删改查

    MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...

  5. 灵活使用 console 让 js 调试更简单

    摘要: 玩转console. 原文:灵活使用 console 让 js 调试更简单 作者:前端小智 Fundebug经授权转载,版权归原作者所有. Web 开发最常用的就是 console.log , ...

  6. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  7. CentOS 下安装 Node.js 8.11.3 LTS Version

    Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google Chrome V8 JavaScript引擎,简单说是运行在服务端的 JavaScript.下面我们来演示一下Cen ...

  8. 【F12】Console命令，让js调试更简单

    Console命令,让js调试更简单 一.显示信息的命令 console.log("normal"); // 用于输出普通信息 console.info("informa ...

  9. js在table指定tr行上或底下添加tr行

    js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementB ...

随机推荐

  1. iOS学习之动画效果的实现

    // //  ViewController.m //  UI-动画练习 // //  Created by jzq_mac on 15/7/22. //  Copyright (c) 2015年 jz ...

  2. HTML5开发实战——Sencha Touch篇(1)

    学习了很多主要的Sencha Touch内容,已经了解了Sencha Touch的开发模式.接下来一段时间我们将利用Sencha Touch来进行自己的web应用构建. 先要解决的是前端的问题.从最简 ...

  3. 2 TypeScript--Hello World

    安装好TypeScript后,我们来完成第一个页面--Hello World 新建index.html文件: <!DOCTYPE html> <html> <head&g ...

  4. 1 Angular 2 简介与 AngularJS 1.x 历史对比

    Angular 2 是一款JavaScript的开源框架,用于协助单一页面应用程序运行.Angular 2 是 AngularJS 1.x 的升级版本,应Web的进化和前端开发的变革还有从Angula ...

  5. Cocos2d-x 3.2 Lua演示样例CurrentLanguageTest（当前语言环境）

    Cocos2d-x 3.2 Lua演示样例CurrentLanguageTest(当前语言环境) 转载请注明:IT_xiao小巫 本篇博客介绍Cocos2d-x 3.2给我们提供的一个样例.获取当前程 ...

  6. cocos2d-x调用scheduleUpdate()不执行update()方法的解决办法【转】

    原文地址:http://blog.csdn.net/somestill/article/details/9699377 前两天使用到每帧都更新动画的scheduleUpdate()方法,但通过cclo ...

  7. Hackrank Equal DP

    Christy is interning at HackerRank. One day she has to distribute some chocolates to her colleagues. ...

  8. make运行阶段划分

    1 make执行分为两个阶段 第一个阶段:读makefile并且建树阶段 第二个阶段:构建目标阶段 2 扩展的立即和推迟 在第一个阶段的扩展是立即,在第二个阶段或者在需要的时候再扩展是推迟,这里的需要 ...

  9. ps -ef | grep

    ps -ef | grep java   查看所有关于java的进程 root     17540     1  0  2009 ?        01:42:27 /usr/java/jdk1.5. ...

  10. Lightoj 1166 - Old Sorting

    Given an array containing a permutation of 1 to n, you have to find the minimum number of swaps to s ...