JS filters-table简单过滤-Version 1

初级版本：

输入框可检索，空格检索忽略
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

最新文章

热门文章