文章
文章用户商城文档资讯沸点导航
!
也想出现在这里？ 联系我们吧
广告区块

【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例

本案例源码链接（非VIP可私聊获取）：https://download.csdn.net/download/weixin_52212950/86286910https://download.csdn.net/download/weixin_52212950/86286910

文章导读：

这篇文章实现一个小案例：在购物平台选商品时我们经常会输价格区间，然后筛选出在这个区间内的商品，其实有JavaScript基础我们就已经能实现了，利用循环判断等知识。但是这篇文章是新方法 forEach，filter，some 的使用实现，可以让我们的实现更轻松。

文章目录：

一：效果展示

二：功能实现分析

2.1 页面渲染数据

2.2 根据价格区间查找

2.3 根据输入结果准确查找

三：完整代码

一：效果展示

页面基本效果

根据价格区间搜索

根据车辆名称搜索

二：功能实现分析

2.1 页面渲染数据

我们的数据存放格式为数组放对象，在写入大量数据后要将其渲染到页面的主表格中，我们可以使用 forEach 方法来实现，每次迭代都会执行一次基础的创建行，添加行的操作

实现过程：

  • 遍历开始，首先轮到的是数组第一个元素，即第一个车辆的数据，然后创建行tr，给行tr添加内容，内容中直接将车辆信息的编号id，名称name，价格price写入，然后再在tbody内加上创建好的行
  • 再轮到下一个车辆的数据，在创建行等操作，直到所有车辆信息全部添加进去结束
  1. car.forEach(function(value,index,arr){
  2.             var tr=document.createElement('tr');
  3.             tr.innerHTML=''+value.id+''+value.name+''+value.price+''
  4.             tbody.appendChild(tr)
  5.         })

2.2 根据价格区间查找

既然是筛选数据，那自然是选择我们的 filter 方法了，为了不让表格数据每次搜索完后上一次的数据还保留，所以每次点击后先清空右侧表格内的数据再去执行筛选。filter 返回的是一个新数组，所以需要一个新定义的数组去接收。筛选过后再使用 forEach 将新数组渲染到右侧的搜错结果表格即可

  1. select1.addEventListener('click',function(){
  2.             rtbody.innerHTML=''
  3.             var newcar=car.filter(function(value,index,arr){
  4.                 return value.price>=start.value&&value.pricevalue;
  5.             })
  6.             // console.log(newcar);
  7.             newcar.forEach(function(value,index,arr){
  8.                 var tr=document.createElement('tr');
  9.                 tr.innerHTML=''+value.name+'  :'+value.price+'万'+''
  10.                 rtbody.appendChild(tr)
  11.             })
  12.         })
    13. 

    

    2.3 根据输入结果准确查找
    

    

    在大批数据中要准确查找某个信息时，使用 some 方法比较合适，因为 some 一旦查找到就会停止遍历，数据量大时可以节省效率，很明显我们这个功能也要让其返回一个符合条件的新数组，但是some返回的结果是一个布尔值，所以此处我们需要自定义数组，然后去用 push 方法将复合查找要求的数据添加到新数组里，并且一旦查找到就让其 返回 ture 终止循环遍历
    

    

    1. select2.addEventListener('click',function(){
    2.         rtbody.innerHTML=''
    3.         newarr=[]
    4.         car.some(function(value,index,arr){
    5.             if(value.name==name1.value){
    6.                 newarr.push(value)
    7.                 return true;
    8.             }
    9.         })
    10.             newarr.forEach(function(value,index,arr){
    11.                 var tr=document.createElement('tr');
    12.                 tr.innerHTML=''+value.name+'  :'+value.price+'万'+''
    13.                 rtbody.appendChild(tr)
    14.             })
    15.     })
      16. 

      

       三：完整代码
      

      1. DOCTYPE html>
      4.     
      5.     
      6.     
      7.     Document
      8.     
      9.         *{
      10.             margin: 0;
      11.             padding: 0;
      12.         }
      13.         .outbox{
      14.            position: absolute;
      15.             width: 1200px;
      16.             left: 50%;
      17.             top: 50%;
      18.             transform: translate(-50%,-50%);
      19.             border-top: 1px solid black;
      20.             border-left: 1px solid black;
      21.             border-right: 2.2px solid black;
      22.             border-bottom: 2.2px solid black;
      23.         }
      24.         .leftbox{
      25.             float: left;
      26.             width: 900px;
      27.             /* height: 600px; */
      28.             box-sizing: border-box;
      29.             border-top: 1.4px solid black;
      30.             border-left: 1.4px solid black;
      31.             border-right: 5px solid black;
      32.         }
      33.         .rightbox{
      34.             float: left;
      35.             width: 298px;
      36.             border-top: 1.5px solid black;
      37.         }
      38.         .top{
      39.             position: relative;
      40.             width: 898px;
      41.             height: 120px;
      42.             border-bottom: 1.4px solid black;
      43.             background-color: rgb(219, 219, 219);
      44.             box-sizing: border-box;
      45.         }
      46.         .bottom{
      47.             padding-top: 28px;
      48.             width: 898px;
      49.             padding-bottom: 28px;
      50.             background-color: rgb(244, 244, 244);
      51.         }
      52.         table{
      53.             margin: 0 auto;
      54.             width: 835px; 
      55.             border: 1.4px solid black;
      56.         }
      57.         thead tr{
      58.             width: 835px;
      59.             height: 40px;
      60.             border: 1.4px solid black;
      61.             background-color: rgb(208, 241, 255);
      62.         }
      63.         tbody tr{
      64.             width: 835px;
      65.             height: 50px;
      66.             border: 1.4px solid black;
      67.             background-color: rgb(255, 239, 239);
      68.         }
      69.         td{
      70.             width: 278px;
      71.             border: 1.4px solid black;
      72.             text-align: center;
      73.             font-weight: bold;
      74.             font-size: 17px;
      75.             letter-spacing: 3px;
      76.         }
      77.         .price{
      78.             position: absolute;
      79.             top: 22px;
      80.             left: 37px;
      81.             letter-spacing: 2px;
      82.             font-size: 18px;
      83.             font-weight: 500;
      84.         }
      85.         .start,.end{
      86.             padding-left: 6px;
      87.             width: 100px;
      88.             height: 30px;
      89.             outline: none;
      90.             font-size: 20px;
      91.         }
      92.         .pricebox{
      93.             position: absolute;
      94.             top: 19px;
      95.             left: 325px;
      96.             letter-spacing: 2px;
      97.             font-size: 18px;
      98.             font-weight: 800;
      99.         }
      100.         .select1{
      101.             position: absolute;
      102.             width: 170px;
      103.             height: 37px;
      104.             top: 17px;
      105.             right: 115px;
      106.             font-size: 14.5px;
      107.             letter-spacing: 2px;
      108.             background-color: rgb(255, 226, 154);
      109.  
      110.             border: 1px solid black;
      111.         }
      112.  
      113.         .name-p{
      114.             position: absolute;
      115.             bottom: 22px;
      116.             left: 94px;
      117.             letter-spacing: 2px;
      118.             font-size: 18px;
      119.             font-weight: 500;
      120.         }
      121.         .name{
      122.             position: absolute;
      123.             bottom: 16px;
      124.             left: 325px;
      125.             letter-spacing: 2px;
      126.             font-size: 18px;
      127.             width: 235px;
      128.             height: 30px;
      129.             outline: none;
      130.             padding-left: 6px;
      131.         }
      132.         .select2{
      133.             position: absolute;
      134.             width: 170px;
      135.             height: 37px;
      136.             bottom: 15px;
      137.             right: 115px;
      138.             font-size: 14.5px;
      139.             letter-spacing: 2px;
      140.             background-color: rgb(255, 226, 154);
      141.  
      142.             border: 1px solid black;
      143.         }
      144.         .select1:hover{
      145.             background-color: rgb(255, 210, 95);
      146.         }
      147.         .select2:hover{
      148.             background-color: rgb(255, 214, 110);
      149.         }
      150.         .rtable{
      151.             margin: 0 auto;
      152.             width: 240px;
      153.             margin-top: 40px;
      154.             margin-bottom: 40px;
      155.         }
      156.         .rthead .rtr{
      157.             width: 240px;
      158.             height: 40px;
      159.             border: 1.4px solid black;
      160.             background-color: rgb(208, 241, 255);
      161.         }
      162.         .rtbody .rtr{
      163.             width: 240px;
      164.             height: 40px;
      165.             border: 1.4px solid black;
      166.             background-color: rgb(255, 201, 114);
      167.         }
      168.         .rtd{
      169.             width: 240px;
      170.             border: 1.4px solid black;
      171.             text-align: center;
      172.             font-weight: bold;
      173.             font-size: 17px;
      174.             letter-spacing: 3px;
      175.         }
      176.         .righttd{
      177.             width: 240px;
      178.             border: 1.4px solid black;
      179.             text-align: center;
      180.             font-weight: bold;
      181.             font-size: 17px;
      182.             letter-spacing: 3px;
      183.             background-color: rgb(255, 234, 206);
      184.         }
      185.         .clear{
      186.             width: 85px;
      187.             height: 85px;
      188.             position: absolute;
      189.             top: 16px;
      190.             right: 13px;
      191.             border: 1px solid black;
      192.             font-weight: 400;
      193.             font-size: 15px;
      194.             background-color: #fff;
      195.         }
      196.         .clear:hover{
      197.             background-color: rgb(247, 247, 247);
      198.         }
      199.     
      202.     
      203.         
      204.             
      205.                 
      206.                
        您要查询的价格区间为(万元):
      207.                
      208.                     ~ 
      209.

  • 您要查询的车辆名称为:

    • 汽车编号汽车名称汽车售价(万元)
    • 查询结果
  • var car=[
  • {
  • 'id':1000001,
  • 'name':'奥迪A6 Avent',
  • 'price':46
  • },
  • {
  • 'id':1000002,
  • 'name':'奥迪A6 allroad',
  • 'price':52
  • },
  • {
  • 'id':1000003,
  • 'name':'奥迪RS6',
  • 'price':145
  • },{
  • 'id':1000004,
  • 'name':'奥迪RS7',
  • 'price':154
  • },
  • {
  • 'id':1000005,
  • 'name':'奥迪A7L',
  • 'price':82
  • },
  • {
  • 'id':1000006,
  • 'name':'GTR R32',
  • 'price':140
  • },
  • {
  • 'id':1000007,
  • 'name':'GTR R33',
  • 'price':101
  • },
  • {
  • 'id':1000008,
  • 'name':'GTR R34',
  • 'price':180
  • },
  • {
  • 'id':1000009,
  • 'name':'GTR R35',
  • 'price':160
  • }
  • ]
  • var tbody=document.querySelector('tbody');
  • var rtbody=document.querySelector('.rtbody');
  • var start=document.querySelector('.start');
  • var end=document.querySelector('.end');
  • var select1=document.querySelector('.select1');
  • var clear=document.querySelector('.clear');
  • var select2=document.querySelector('.select2');
  • var name1=document.querySelector('.name');
  • clear.addEventListener('click',function(){
  • window.location.reload()
  • })
  • car.forEach(function(value,index,arr){
  • var tr=document.createElement('tr');
  • tr.innerHTML=''+value.id+''+value.name+''+value.price+''
  • tbody.appendChild(tr)
  • })
  • select1.addEventListener('click',function(){
  • rtbody.innerHTML=''
  • var newcar=car.filter(function(value,index,arr){
  • return value.price>=start.value&&value.price
  • })
  • // console.log(newcar);
  • newcar.forEach(function(value,index,arr){
  • var tr=document.createElement('tr');
  • tr.innerHTML=''+value.name+' :'+value.price+'万'+''
  • rtbody.appendChild(tr)
  • })
  • })
  • select2.addEventListener('click',function(){
  • rtbody.innerHTML=''
  • newarr=[]
  • car.some(function(value,index,arr){
  • if(value.name==name1.value){
  • newarr.push(value)
  • return true;
  • }
  • })
  • newarr.forEach(function(value,index,arr){
  • var tr=document.createElement('tr');
  • tr.innerHTML=''+value.name+' :'+value.price+'万'+''
  • rtbody.appendChild(tr)
  • })
  • })
    • 版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
    本文链接：https://blog.csdn.net/weixin_52212950/article/details/126139222
    声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
    0 条回复 A文章作者 M管理员
      暂无讨论，说说你的看法吧
    ❯
    个人中心
    购物车
    优惠劵
    有新私信 私信列表
    搜索

    • 扫码打开当前页

    返回顶部
    幸运之星正在降临...
    点击领取今天的签到奖励！
    恭喜！您今天获得了{{mission.data.mission.credit}}积分