zoukankan      html  css  js  c++  java
  • 案例:商品查询

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            table {
                width: 400px;
                border: 1px solid #000;
                border-collapse: collapse;
                margin: 0 auto;
            }
            
            td,
            th {
                border: 1px solid #000;
                text-align: center;
            }
            
            input {
                width: 50px;
            }
            
            .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> 按照商品名称查询: <input type="text" class="product"> <button class="search-pro">查询</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>产品名称</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
    
    
            </tbody>
        </table>
        <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');
            var search_price = document.querySelector('.search-price');
            var start = document.querySelector('.start');
            var end = document.querySelector('.end');
            var product = document.querySelector('.product');
            var search_pro = document.querySelector('.search-pro');
            setDate(data);
            // 2. 把数据渲染到页面中
            function setDate(mydata) {
                // 先清空原来tbody 里面的数据
                tbody.innerHTML = '';
                mydata.forEach(function(value) {
                    // console.log(value);
                    var tr = document.createElement('tr');
                    tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
                    tbody.appendChild(tr);
                });
            }
    
            // 3. 根据价格查询商品
            // 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
            search_price.addEventListener('click', function() {
                // alert(11);
                var newDate = data.filter(function(value) {
                    return value.price >= start.value && value.price <= end.value;
                });
                console.log(newDate);
                // 把筛选完之后的对象渲染到页面中
                setDate(newDate);
            });
            // 4. 根据商品名称查找商品
            // 如果查询数组中唯一的元素, 用some方法更合适,因为它找到这个元素,就不在进行循环,效率更高]
            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);
            })
        </script>
    </body>
    
    </html>
  • 相关阅读:
    linux tmux基本操作
    AJAX json集合传入Controller后台
    python 数据读取
    appium
    接口测试设计思路
    python 常用模块
    接口测试程序部分
    测试用例设计思路
    mock_待续
    网站收藏
  • 原文地址:https://www.cnblogs.com/qtbb/p/11819277.html
Copyright © 2011-2022 走看看