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 ...
随机推荐
- 2016/05/25 get和post的区别
get是从服务器上获取数据,post是向服务器传送数据. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过HTTP ...
- HashMap的数据机构是什么样的?
参考:http://www.cnblogs.com/ITtangtang/p/3948406.html
- vs2010 创建和发布 webservice
1 打开VS2010,菜单 文件->新建->项目 2 选择[ASP.net 空web应用程序],将其命名为自己想的工程名称. 3 右键点击工程,添加->新建项 选择 web服务 ...
- Mac mysql 运行sql文件中文乱码的问题
别再傻傻的改什么mysql的编码格式了. 是.sql文件的编码有问题,把sql文件的编码格式改成utf-8就行了. mac怎么修改呢? vscode最爽了. 用vscode打开.sql文件,然后点右下 ...
- HDU1087 Super Jumping! Jumping! Jumping! —— DP
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1087 Super Jumping! Jumping! Jumping! Time Limi ...
- How to Execute Page_Load() in Page's Base Class?
https://stackoverflow.com/questions/2737092/how-to-execute-page-load-in-pages-base-class We faced th ...
- frameset使用总结
frameset使用总结 2009-06-15 00:59 213人阅读 评论(0) 收藏 举报 框架bordermicrosoftinternethtml文档 FRAMESET 元素是 FRAME ...
- Jquery与Dom对象相互转化
Jquery与Dom对象相互转化 jQurey对象和DOM对象的相互转换 在讨论jQurey对象和DOM对象的相互转换之前,我们先约定定义变量的风格.如果我们获取的对象是jQuery对象,那么我们 ...
- I.MX6 su.c 测试
/************************************************************************* * I.MX6 su.c 测试 * 说明: * 今 ...
- 并不对劲的bzoj1500: [NOI2005]维修数列
传送门-> 这题没什么好说的……小清新数据结构题……并不对劲的人太菜了,之前照着标程逐行比对才过了这道题,前几天刚刚把这题一遍写对…… 其实这题应该口胡很容易.操作1,2,3,4,5就是普通的s ...