首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JSfilterstable简单过滤Version1

作者：love28119_529_700 | 来源：互联网 | 2023-09-13 17:57
初级版本：输入框可检索，空格检索忽略radio点击后会过滤最后的两个输入框可根据age范围检索过滤三个单独的功能，不能协同工作1

初级版本&＃xff1a;


  • 输入框可检索&＃xff0c;空格检索忽略
  • radio点击后会过滤
  • 最后的两个输入框可根据age范围检索过滤
  • 三个单独的功能&＃xff0c;不能协同工作

1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset&＃61;"utf-8">
5 <meta name&＃61;"viewport" content&＃61;"width&＃61;device-width">
6 <title>JS Bintitle>
7 <script src&＃61;"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">script>
8 head>
9 <body>
10 <div class&＃61;"container">
11 <input type&＃61;"text" id&＃61;"search-input" placeholder&＃61;"Search for names..">
12 <div class&＃61;"radio-container">
13 <input type&＃61;"radio" name&＃61;"sex" id&＃61;"all" class&＃61;"radio-box" value&＃61;"all" checked/>All
14 <input type&＃61;"radio" name&＃61;"sex" id&＃61;"male" class&＃61;"radio-box" value&＃61;"Male"/>Male
15 <input type&＃61;"radio" name&＃61;"sex" id&＃61;"female" class&＃61;"radio-box" value&＃61;"Female"/>Female
16 div>
17 <div class&＃61;"range-container">
18 <input type&＃61;"text" class&＃61;"range-text" id&＃61;"min"/> ~
19 <input type&＃61;"text" class&＃61;"range-text" id&＃61;"max"/>
20 div>
21 <table border&＃61;"1">
22 <thead>
23 <tr>
24 <th width&＃61;"60%">Nameth>
25 <th width&＃61;"20%">Sexth>
26 <th width&＃61;"20%">Ageth>
27 tr>
28 thead>
29 <tbody>
30 <tr>
31 <td>Apple Chentd>
32 <td>Ftd>
33 <td>10td>
34 tr>
35 <tr>
36 <td>Ajax Greentd>
37 <td>Mtd>
38 <td>12td>
39 tr>
40 <tr>
41 <td>Appe Chentd>
42 <td>Mtd>
43 <td>14td>
44 tr>
45 <tr>
46 <td>Cici Chentd>
47 <td>Ftd>
48 <td>20td>
49 tr>
50 <tr>
51 <td>Lili Blacktd>
52 <td>Ftd>
53 <td>24td>
54 tr>
55 <tr>
56 <td>Dragon Whitetd>
57 <td>Mtd>
58 <td>30td>
59 tr>
60 <tr>
61 <td>Judy Whitetd>
62 <td>Mtd>
63 <td>32td>
64 tr>
65 <tr>
66 <td>Jack Johnstd>
67 <td>Mtd>
68 <td>41td>
69 tr>
70 <tr>
71 <td>Lele Litd>
72 <td>Ftd>
73 <td>50td>
74 tr>
75 tbody>
76 table>
77 div>
78 body>
79 html>

HTML

1 .container{
2 width:212px;
3 }
4 #search-input{
5 width:200px;
6 height:25px;
7 font-size:16px;
8 border-radius:5px;
9 outline:none;
10 border:none;
11 border:1px solid orange;
12 padding-left:10px;
13 }
14 .radio-container{
15 width:100%;
16 text-align:center;
17 margin:10px auto;
18 height:20px;
19 line-height:20px;
20 }
21 .range-container{
22 width:100%;
23 margin:auto;
24 text-align:center;
25 }
26 .range-text{
27 width:25px;
28 height:26px;
29 outline:none;
30 border-radius:50%;
31 border:none;
32 border:1px solid orange;
33 padding-left:5px;
34 }
35 table{
36 margin:10px auto;
37 width:100%;
38 border-collapse: collapse;
39 border:none;
40 border-top:1px solid;
41 }
42 td{
43 text-align:center;
44 }
45 tr{
46 border-bottom:1px solid #ccc;
47 }
48 .error{
49 background: red;
50 }

CSS

JS代码&＃xff1a;


1 var input&＃61;document.getElementById(&＃39;search-input&＃39;);
 2 var trs&＃61;document.getElementsByTagName(&＃39;tr&＃39;);
 3 var tds&＃61;document.getElementsByTagName(&＃39;td&＃39;);
 4 var chooseMale&＃61;document.getElementById(&＃39;male&＃39;);
 5 var chooseFema&＃61;document.getElementById(&＃39;female&＃39;);
 6 var chooseAll&＃61;document.getElementById(&＃39;all&＃39;);
 7 var minElem&＃61;document.getElementById(&＃39;min&＃39;);
 8 var maxElem&＃61;document.getElementById(&＃39;max&＃39;);
 9 input.onkeyup&＃61;checkName;
10 chooseMale.onclick&＃61;function(){
11 checkSex(&＃39;M&＃39;);
12 }
13 chooseFema.onclick&＃61;function(){
14 checkSex(&＃39;F&＃39;);
15 }
16 chooseAll.onclick&＃61;function(){
17 checkSex(&＃39;A&＃39;);
18 }
19 minElem.onblur&＃61;function(){
20 checkRange(min.value,max.value);
21 }
22 maxElem.onblur&＃61;function(){
23 checkRange(min.value,max.value);
24 }
25 function checkName(){
26 var input_str&＃61;input.value;
27 input_str&＃61;trim(input_str);
28 for(var i&＃61;1;i){
29 var str&＃61;trs[i].getElementsByTagName(&＃39;td&＃39;)[0].innerText;
30 if(str.toUpperCase().indexOf(input_str.toUpperCase())>-1){
31 trs[i].style.display&＃61;&＃39;&＃39;;
32 }
33 else{
34 trs[i].style.display&＃61;&＃39;none&＃39;;
35 }
36 }
37 }
38 function checkSex(choice){
39 for(var i&＃61;1;i){
40 var str&＃61;trs[i].getElementsByTagName(&＃39;td&＃39;)[1].innerText;
41 if(choice!&＃61;&＃61;&＃39;A&＃39; && (str!&＃61;&＃61;choice || str.toUpperCase()!&＃61;&＃61;choice)){
42 trs[i].style.display&＃61;&＃39;none&＃39;;
43 }
44 else{
45 trs[i].style.display&＃61;&＃39;&＃39;;
46 }
47 }
48 }
49 function checkRange(min,max){
50 if(min&＃61;&＃61;&＃61;"") min&＃61;-1
51 else min&＃61;parseInt(min);
52 if(max&＃61;&＃61;&＃61;"") max&＃61;-1
53 else max&＃61;parseInt(max);
54 if(min>max && min!&＃61;&＃61;-1 && max!&＃61;&＃61;-1){
55 minElem.classList.add(&＃39;error&＃39;)
56 maxElem.classList.add(&＃39;error&＃39;);
57 }
58 else{
59 minElem.classList.remove(&＃39;error&＃39;);
60 maxElem.classList.remove(&＃39;error&＃39;);
61 }
62 for(var i&＃61;1;i){
63 var str&＃61;trs[i].getElementsByTagName(&＃39;td&＃39;)[2].innerText;
64 var age&＃61;parseInt(str);
65 if ( (min!&＃61;&＃61;-1 && max!&＃61;&＃61;-1)&&(agemax) ||
66 (min&＃61;&＃61;&＃61;-1 && max!&＃61;&＃61;-1)&&(age>max) ||
67 (min!&＃61;&＃61;-1 && max&＃61;&＃61;&＃61;-1)&&(age<min) ) {
68 trs[i].style.display&＃61;&＃39;none&＃39;;
69 }
70 else{
71 trs[i].style.display&＃61;&＃39;&＃39;;
72 }
73 }
74 }
75 function trim(str){
76 str&＃61;str.replace(/\s /g,&＃39; &＃39;);//将所有的空格串替换成一个空格
77 str&＃61;str.replace(/^\s |\s $/g,&＃39;&＃39;);//去两头空格
78 return str;
79 }

运行结果&＃xff1a;

 



更多专业前端知识&＃xff0c;请上
【猿2048】www.mk2048.com
推荐阅读
  • ip

    javascript分页类支持页码格式

    javascript分页类支持页码格式
    前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]
  • ip

    使用ArcGIS for Java和Flex浏览自定义ArcGIS Server 9.3地图

    使用ArcGIS for Java和Flex浏览自定义ArcGIS Server 9.3地图
    本文介绍了如何在Flex应用程序中实现浏览自定义ArcGIS Server 9.3发布的地图。这是一个基本的入门示例，适用于初学者。 ... [详细]
  • subset

    AngularJS 在 IE6 和 IE7 中实现历史记录支持

    我在使用 AngularJS 的路由功能开发单页应用 (SPA)，但需要支持 IE7（包括 IE8 的 IE7 兼容模式）。我希望浏览器的历史记录功能能够正常工作，即使需要使用 jQuery 插件。 ... [详细]
  • loops

    IOS Run loop详解

    IOS Run loop详解
    为什么80%的码农都做不了架构师？转自http:blog.csdn.netztp800201articledetails9240913感谢作者分享Objecti ... [详细]
  • stream

    h5调用本地摄像头和麦克风一

    h5调用本地摄像头和麦克风一
    h5调用本地摄像头和麦克风一,Go语言社区,Golang程序员人脉社 ... [详细]
  • format

    使用HTML和JavaScript实现视频截图功能

    使用HTML和JavaScript实现视频截图功能
    本文介绍了如何利用HTML和JavaScript实现从远程MP4、本地摄像头及本地上传的MP4文件中截取视频帧，并展示了具体的实现步骤和示例代码。 ... [详细]
  • include

    【数据结构】线段数/segment tree/interval tree

    【线段树】　　本质是二叉树，每个节点表示一个区间[L,R]，设m(R-L+1)2(该处结果向下取整)左孩子区间为[L，m]，右孩子区间为[m ... [详细]
  • 数组

    Java 网站开发指南

    本文详细介绍了 Java 网站开发的相关资源和步骤，包括常用网站、开发环境和框架选择。 ... [详细]
  • grid

    Leetcode学习成长记：天池leetcode基础训练营Task01数组

    Leetcode学习成长记：天池leetcode基础训练营Task01数组
    前言这是本人第一次参加由Datawhale举办的组队学习活动，这个活动每月一次，之前也一直关注，但未亲身参与过，这次看到活动 ... [详细]
  • scala

    Spark 弹性分布式数据集详解

    本文详细介绍了 Spark 中的弹性分布式数据集（RDD）及其常见的操作方法，包括 union、intersection、cartesian、subtract、join、cogroup 等转换操作，以及 count、collect、reduce、take、foreach、first、saveAsTextFile 等行动操作。 ... [详细]
  • scala

    兆芯X86 CPU架构的演进与现状（国产CPU系列）

    兆芯X86 CPU架构的演进与现状（国产CPU系列）
    本文详细介绍了兆芯X86 CPU架构的发展历程，从公司成立背景到关键技术授权，再到具体芯片架构的演进，全面解析了兆芯在国产CPU领域的贡献与挑战。 ... [详细]
  • scala

    Java 15 发布，带来多项重要更新！

    2020年9月15日，Oracle正式发布了最新的JDK 15版本。本次更新带来了许多新特性，包括隐藏类、EdDSA签名算法、模式匹配、记录类、封闭类和文本块等。 ... [详细]
  • scala

    JUC（三）：深入解析AQS

    JUC（三）：深入解析AQS
    本文详细介绍了Java并发工具包中的核心类AQS（AbstractQueuedSynchronizer），包括其基本概念、数据结构、源码分析及核心方法的实现。 ... [详细]
  • include

    单片微机原理P3：80C51外部拓展系统

    单片微机原理P3：80C51外部拓展系统
    　　外部拓展其实是个相对来说很好玩的章节，可以真正开始用单片机写程序了，比较重要的是外部存储器拓展，81C55拓展，矩阵键盘，动态显示，DAC和ADC。0.IO接口电路概念与存 ... [详细]
  • web

    网站访问全流程解析

    网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名（如www.yy.com）到页面完全展示的整个过程，包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
author-avatar
love28119_529_700
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有