javascript實現(xiàn)查詢商品功能

更新時間：2021年09月01日 08:33:55 作者：風(fēng)筱默染

這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)查詢商品功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了javascript實現(xiàn)查詢商品功能的具體代碼，供大家參考，具體內(nèi)容如下

這是沒有點擊查詢的主界面圖

這是點擊名稱查詢之后

按照價格查詢

代碼：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>JavaScript查詢功能</title>
  <style>
  body{
   font-family: "微軟雅黑";
   font-size: 18px;
  }
   table {
    width: 800px;
    border: 1px solid #000;
    border-collapse: collapse;
    margin: 0 auto;
   }
   td,th {
    border: 1px solid #000;
    text-align: center;
   }
   input {
    width: 70px;
   }
   .search {
    width: 600px;
    margin: 20px auto;
   }
  </style>
 </head>
 <body>
  <div class="search">
   按照價格查詢: <input type="text" class="start"> - <input type="text" class="end">
   <button class="search-price">搜索</button>
   <br><br>
   按照商品名稱查詢: <input type="text" class="product">
   <button class="search-pro">查詢</button>
  </div>
  <table>
   <thead>
    <tr>
     <th>產(chǎn)品名稱</th>
     <th>價格</th>
     <th >處理器</th>
     <th >屏幕</th>
     <th >相機</th>
     <th >電池</th>
     <th >特色功能</th>
    </tr>
   </thead>
   <tbody>
   </tbody>
  </table>
  <script>
  // 利用新增數(shù)組方法操作數(shù)據(jù)
  var data = [
  {
   pname: '華為mateX2',
   price: 17999,
   processor:'麒麟9000',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: '華為mate40Pro',
   price: 6599,
   processor:'麒麟9000',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: '華為mate40',
   price: 4999,
   processor:'麒麟9000E',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: '華為mate30Pro',
   price: 5499,
   processor:'麒麟990',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: '華為mate30',
   price: 3599,
   processor:'麒麟990',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: '華為P40Pro',
   price: 7999,
   processor:'麒麟990',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: '華為P40',
   price: 3999,
   processor:'麒麟990',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: '榮耀30Pro',
   price: 3999,
   processor:'麒麟990',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: '華為mate20Pro',
   price: 1599,
   processor:'麒麟980',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: '小米11Pro',
   price: 4799,
   processor:'高通驍龍888',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: '小米11',
   price: 3799,
   processor:'高通驍龍888',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: '小米Mix4',
   price: 5499,
   processor:'高通驍龍888',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: '紅米K40Pro',
   price: 2999,
   processor:'高通驍龍888',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: '紅米K40',
   price: 1999,
   processor:'高通驍龍870',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: 'VivoX60Pro',
   price: 5499,
   processor:'高通驍龍888',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: 'VivoX60',
   price: 3499,
   processor:'獵戶座',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  {
   pname: 'OPPOReno6Pro',
   price: '',
   processor:'高通驍龍888',
   screen:'',
   camera:'',
   Battery:'',
   CharacteristicFunction:'',
  },
  ];
   // 1. 定義和獲取元素
   var tbody = document.querySelector('tbody');/*定義tbody*/
   var search_price = document.querySelector('.search-price');/*定義search-price*/
   var processor=document.querySelector('.processor');/*定義處理器*/
   var screen=document.querySelector('.screen');/*定義屏幕*/
   var camera=document.querySelector('.camera');/*定義相機*/
   var Battery=document.querySelector('.Battery');/*定義電池*/
   var CharacteristicFunction=document.querySelector('.CharacteristicFunction');/*特色功能*/
   var start = document.querySelector('.start');
   var end = document.querySelector('.end');
   var product = document.querySelector('.product');
   
   setDate(data);
   // 2. 把數(shù)據(jù)渲染到頁面中
   function setDate(mydata) {
    // 先清空原來tbody 里面的數(shù)據(jù)
    tbody.innerHTML = '';
    mydata.forEach(function(value) { /*添加*/
     var tr = document.createElement('tr');
     tr.innerHTML = '<td>' + value.pname +'</td><td>'
     + value.price+'</td><td>'
     + value.processor+'</td><td>'
     + value.screen+'</td><td>'
     + value.camera+'</td><td>'
     + value.Battery+'</td><td>'
     + value.CharacteristicFunction+'</td>'
     ;
     tbody.appendChild(tr);
    });
   }
   // 3. 根據(jù)價格查詢商品
   // 點擊按鈕,就可以根據(jù)商品價格去篩選數(shù)組里面的對象
   search_price.addEventListener('click', function() {
    var newDate = data.filter(function(value) {
     return value.price >= start.value && value.price <= end.value;
    });
    console.log(newDate);
    // 把篩選完之后的對象渲染到頁面中
    setDate(newDate);
   });
   // 4.模糊查找---- 根據(jù)商品名稱查找商品模糊查找
   product.addEventListener('keyup', function() {
       // 把拿到的數(shù)據(jù)渲染到頁面中
       var result = data.filter(function(value) {
           if (value.pname.includes(product.value)) {
               return value
           }
       })
       setDate(result);
       setDate(data.filter(function(value) {
           if (value.pname.includes(product.value)) {
               return value
           }
       }));
   })
  </script>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: