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"/> ~
<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的更多相关文章
- JS filters-ul li简单过滤
功能要求:在input中输入字母,显示ul li中匹配的元素,隐藏不匹配的 <!DOCTYPE html> <html> <head> <meta chars ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- jQuery简单过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--jQuery选择器详解 根据所获 ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- 灵活使用 console 让 js 调试更简单
摘要: 玩转console. 原文:灵活使用 console 让 js 调试更简单 作者:前端小智 Fundebug经授权转载,版权归原作者所有. Web 开发最常用的就是 console.log , ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
- CentOS 下安装 Node.js 8.11.3 LTS Version
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google Chrome V8 JavaScript引擎,简单说是运行在服务端的 JavaScript.下面我们来演示一下Cen ...
- 【F12】Console命令，让js调试更简单
Console命令,让js调试更简单 一.显示信息的命令 console.log("normal"); // 用于输出普通信息 console.info("informa ...
- js在table指定tr行上或底下添加tr行
js在table指定tr行上或下面添加tr行 function onAddTR(trIndex) { var tb = document.getElementB ...
随机推荐
- 基于docker容器搭建fastdfs分布式文件系统
本次环境的搭建参考了 https://blog.csdn.net/qq_43455410/article/details/84797814, 感谢博主. 主要流程如下: 1. 下载fastdfs镜像 ...
- js的几种循环语句
//js种的循环语句 //while与do while的区别是while是满足条件后才执行 //do while是不管满不满足条件都会执行一次 //for 循环与while,do while相比循环结 ...
- Android 官方博客 - Android应用程序的内存分析（翻译）（转）
转自:http://www.cnblogs.com/wisekingokok/archive/2011/11/30/2245790.html Dalvik虚拟机支持垃圾收集,但是这不意味着你可以不用关 ...
- UVA 437 The Tower of Babylon巴比伦塔
题意:有n(n≤30)种立方体,每种有无穷多个.要求选一些立方体摞成一根尽量高的柱子(可以自行选择哪一条边作为高),使得每个立方体的底面长宽分别严格小于它下方立方体的底面长宽. 评测地址:http:/ ...
- C#使用 webBrowser 控件总结
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- [MAC] Load Crypto.Cipher.ARC4 Failed, Use Pure Python Instead.
MAC启动GoAgent,出现Load Crypto.Cipher.ARC4 Failed, Use Pure Python Instead. 解决方法:为Python安装pycrypto,可通过Py ...
- POJ2912 Rochambeau —— 种类并查集 + 枚举
题目链接:http://poj.org/problem?id=2912 Rochambeau Time Limit: 5000MS Memory Limit: 65536K Total Submi ...
- cell.getCellType有几种
CellType 类型 值CELL_TYPE_NUMERIC 数值型 0CELL_TYPE_STRING 字符串型 1CELL_TYPE_FORMULA 公式型 2CELL_TYPE_BLANK 空值 ...
- Where Are You Standing?
/*********************************************************************** * Where Are You Standing? * ...
- 并不对劲的bzoj4827:loj2020:p3723:[AHOI/HNOI2017]礼物
题目大意 有两个长度为\(n\)(\(n\leq5*10^4\))的数列\(x_1,x_2,...,x_n\)和\(y_1,y_2,...,y_n\),两个数列里的数都不超过\(m\)(\(m\leq ...