js实现查询商品案例

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

<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便可结束程序,不需要浪费太多的事件,大大加强了办事效率

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-07-21

vue.js+boostrap项目实践(案例详解)

一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

Vue.js进行查询操作的实例详解

Vue.js进行查询操作的实例详解 实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../lib/vue.min.js" type="text/javascript" ></script> <title>字符转换</title> </head>

PHP+JS实现的商品秒杀倒计时用法示例

本文实例讲述了PHP+JS实现的商品秒杀倒计时用法.分享给大家供大家参考,具体如下: <?php //php的时间是以秒算.js的时间以毫秒算 date_default_timezone_set('PRC'); //date_default_timezone_set("Asia/Hong_Kong");//地区 //配置每天的活动时间段 $starttimestr = "2016-3-29 8:10:00"; $endtimestr = "2016-

php版淘宝网查询商品接口代码示例

本文来给大家介绍一个php版淘宝网查询商品接口代码的例子,下面要改成你的信息的在代码后面都有说明了,同时sdk包我们也要官方下载. 下载SDK后直接引用包,并创建如下的类,并运行之,即完成了调用接口(taobao.user.seller.get)的过程(调用接口说明可见下载的SDK)说明:    TopClient为调用SDK的实例化类    UserSellerGetRequest为API的请求参数封装类 注:该接口是在沙箱环境下调用,获取的数据,也是沙箱中数据.若要获取线上环境,请填写自己创

vue.js购物车添加商品组件的方法

现实向购物车添加商品组件 代码 <template> <div class="cartcontrol"> <!--商品减一区域--> <div class="reduce" v-show="food.count>0"> <i class="icon-remove_circle_outline"></i> </div> <!--商品数

MongoDB模糊查询操作案例详解(类关系型数据库的 like 和 not like)

1.作用与语法描述 作用: 正则表达式是使用指定字符串来描述.匹配一系列符合某个句法规则的字符串.许多程序设计语言都支持利用正则表达式进行字符串操作.MongoDB 使用 $regex 操作符来设置匹配字符串的正则表达式. 语法一 { <field>: { $regex: /pattern/, $options: '<options>' } } { <field>: { $regex: 'pattern', $options: '<options>' } }

JavaWeb实现简单查询商品功能

本文实例为大家分享了JavaWeb实现简单查询商品功能的具体代码,供大家参考,具体内容如下 CustomerServlet.java package com.subing.web; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet

js时间查询插件使用详解

我从同事那拿来一个时间查询的插件,先记录下来: 首先要引入js文件和css文件,因为我用到了bootstrap  所以引入的文件有点多:ps: 如果有需要的小伙伴,可以直接跟我说 <script src="jquery-1.11.2.min.js"></script> <script src="bootstrap.min.js"></script> <script src="moment.js"

原生js实现查询天气小应用

本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下 demo:  https://zsqosos.github.io/weather/ 实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市,随后调用聚合数据的天气API将数据放在页面上.由于ajax不支持跨域,所以采用了jsonp的方式来调用数据. 实现的原理比较简单,HTML和css比较长,我就只将js代码贴出来,想看完整代码的朋友可以去我的githu

oracle—SQL技巧之(一)连续记录查询sql案例测试

需求说明: 需要查询出某个客户某一年那些天是有连续办理过业务 实现SQL如下: 创建表: 复制代码 代码如下: create table test_num (tyear number, tdate date); 测试数据: insert into test_num select 2014,trunc(sysdate)-1 from dual union all select 2014,trunc(sysdate)-002 from dual union all select 2014,trunc