初级版本：

  • 输入框可检索，空格检索忽略
  • 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. 云上领跑，快人一步：华为云抢先发布Redis5.0

    12月17日,华为云在DCS2.0的基础上,快人一步,抢先推出了新的Redis 5.0产品,这是一个崭新的突破.目前国内在缓存领域的发展普遍停留在Redis4.0阶段,华为云率先发布了Redis5.0 ...

  2. Android开发pool解析xml

    xml在开发中的作用不可小觑,很多时候我们都要用到这种文件,所以学习它的解析方式很是必要. 我们都知道java中xml的解析有:dom,SAX,但是Android下我们使用pool解析,是更为方便,而 ...

  3. 2016/4/2 json：js和jquery中轻量级数据交换格式 例： 窗口弹出 popwindow

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...

  4. Hackrank Kingdom Division 树形DP

    题目链接:传送门 题意: 给你一棵树,n个点 每个点可以染成红色和蓝色 但是红色的点与其相邻的点中必须有红色节点,蓝色也是 问你有多少种染色的方案 题解: 树形dp 先转化为有根树,取1为根 设定dp ...

  5. JavaScript基础教程复习笔记

    document.write("<h1>这是一个标题</h1>"); 您只能在 HTML 输出中使用 document.write.如果您在文档加载后使用该 ...

  6. 浅谈UML学习笔记之用例图

    最近一直在学习UML的基础知识,再看完视频之后,并没有很好的总结,在画图的过程中发现了很多的问题,下面是看书的过程自己总结的UML用例图的一点知识,与大家分享一下. 一.概念 用例图是由参与者.用例以 ...

  7. The input stream is not a valid binary format.

    The input stream is not a valid binary format. The starting contents (in bytes) are: 53-79-73-74-65- ...

  8. 【SCOI 2005】 最大子矩阵

    [题目链接] 点击打开链接 [算法] 动态规划 我们发现,M只有两种取值,1和2,那么,只需分类讨论即可 当M = 1时,其实这个问题就成了就最大连续子段和的问题,只不过要选K段而已 用f[i][j] ...

  9. session关联接口

    #coding:utf-8 import requests,json,re ''' session关联接口,第一步访问登录接口,headers中要有cookie,不然会登录失败,登录成功后,添加随笔保 ...

  10. bzoj3090

    树形dp 有一个比较明显的dp状态是dp[i][j]表示当前i节点的子树已经满足且i剩下j元钱的最小操作次数,这样复杂度比较高状态数已经有O(n*x)的了,转移再来x,肯定不行. 我们考虑把状态和dp ...