js 상품 사례 조회 실현

본 논문 의 사례 는 js 가 상품 을 조회 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.

<div class="search">
        ：<input type="text" class="start"> - <input type="text" class="end">
  <button class="search-price">  </button>         ：<input type="text" class="product">
  <button class="search-prro">  </button>
 </div>
 <table>
  <thead>
   <tr>
    <th>id</th>
    <th>    </th>
    <th>  </th>
   </tr>
  </thead>
  <tbody>
   <!-- <tr>
    <td>1</td>
    <td>  </td>
    <td>2000</td>
   </tr>
   <tr>
    <td>2</td>
    <td>oppo</td>
    <td>999</td>
   </tr>
   <tr>
    <td>3</td>
    <td>  </td>
    <td>1299</td>
   </tr>
   <tr>
    <td>4</td>
    <td>  </td>
    <td>1999</td>
   </tr> -->
  </tbody>
</table>

 css:

 *{
   margin: 0;
   padding: 0;
  }
  body{
   width: 1000px;
   margin: 0 auto;
  }
  .search{
   text-align: center;
   /* margin: 0 auto; */
  }
  table{
   padding-top: 20px;
   width: 1000px;
   height: 100px;
   /* border: 1px solid #ccc; */
   margin:0 auto ; 
   
  }
  th,tr,td{
   border: 1px solid #ccc;
   text-align: center;
   height: 50px;
 }

js：

<script>
  //              
  var data = [{
   id:1,
   pname: '  ',
   price :3999
  },{
   id:2,
   pname: 'oppo',
   price :999
  },
  {
   id:3,
   pname: '  ',
   price :1299
  },
  {
   id:4,
   pname: '  ',
   price :1999
  } 
  ];

  //1.       
  var tbody = document.querySelector('tbody');
  //2.         
  //forEach()。        ，            ，              ，              
  

  //          ，       ,     
  setDate(data);


  //           ，              
  function setDate(mydata){

   //         ，   tbody     
   tbody.innerHTML = '';


   mydata.forEach(function(value){
   //  
   // console.log(value);

   //       tbody  ，    tbody    tr
   var tr = document.createElement('tr'); 
   //           value，                      ：value.id
   tr.innerHTML = '<td>'+value.id +'</td> <td>'+value.pname +'</td> <td>'+value.price +'</td>';
   tbody.appendChild(tr); 
   });
  }


  //3.          
  //filter()           
  //           
  var search_price = document.querySelector('.search-price'); 
  var start = document.querySelector('.start');
  var end = document.querySelector('.end');

  search_price.addEventListener('click',function(){
   // alert(1) //  
   //             
   var newDate = data.filter(function(value){
    // console.log(value);
    //   ：     <=    <=    
    return value.price >= start.value && value.price <= end.value; 
   });
  //      
  // console.log(newDate);//  
  //                
  //      
   setDate(newDate);
  })
  

  //4.        ，         filter()      ，             
  //  some    ，  some         ，     ，  some        
  //        
  var product = document.querySelector('.product');//  
  var search_pro = document.querySelector('.search-prro'); //  

  search_pro.addEventListener('click',function(){
   //            
   var arr = [];
   data.some(function(value){
    if(value.pname === product.value){
     // console.log(value); //  
     arr.push(value);//       ，                
     return true; //return    true
    }
   });
   //         
   setDate(arr); //    value.price   value      arr    
  })

</script>

구현 효과:

왜 마지막 으로 some 를 이용 하여 조회 해 야 합 니까?


배열 의 some 방법 을 이용 하여 검색 을 옮 겨 다 니 기 때문에 값 결과 가 true 이면 프로그램 을 끝 낼 수 있 습 니 다.너무 많은 사건 을 낭비 하지 않 아 도 되 고 업무 효율 을 크게 강화 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.