es6查询商品小demo

codetimev

已于 2022-03-29 15:25:34 修改

阅读量1.3k

点赞数 1

文章标签： javascript

于 2022-03-29 15:20:46 首次发布

本文链接：https://blog.csdn.net/qq_44017091/article/details/123822360

版权

最近再学习了一下es6语法，跟着学习了一个小demo
黑马前端js高级（含es6）–pink老师](https://www.bilibili.com/video/BV17y4y1J7L1?p=41) 主要完成了p41到p44的练习
直接上代码吧…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .top{
            width: 700px;
            height: 50px;
            margin: 10px auto;
        }
        input{
            width: 80px;
        }
        .main{
            width:700px;
            height: 1000px;
            margin: 0 auto;
            text-align: center;
            padding: 30px;
        }
    </style>
</head>
<body>
    <div class="top">
        按照价格查询：
        <input type="text" class="start" />-<input type="text" class="end"/>
        <button class="seach">搜索</button>
        按照名称查询：<input type="text" class="product"/> 
        <button class="query">查询</button>
    </div>
    <div class="main">
        <table border="1" style="border-collapse: collapse;">
            <thead>
                <tr>
                    <th>id</th>
                    <th>产品名称</th>
                    <th>产品价格</th>
                </tr>
            </thead>
             <tbody>
             </tbody>            
         </table>
    </div> 
    <script>
        // 商品的数组
        var data=[{
            id:'1',
            name:'iphone',
            price:2000
        },
        {
            id:'2',
            name:'thinkpad',
            price:6000
        },
        {
            id:'3',
            name:'notebook',
            price:4000

        },
        {
            id:'4',
            name:'mac',
            price:10000
        }
       ]
    //    获得一些dom元素
        var tbody=document.querySelector('tbody');
        var seach=document.querySelector('.seach');
        var query=document.querySelector('.query');
        var start=document.querySelector('.start');
        var product=document.querySelector('.product');
        var end=document.querySelector('.end');
        // 没有封装之前的遍历
        // data.forEach((val)=>{
        //     // console.log(val)
        //     tr=document.createElement('tr');
        //     tr.innerHTML='<td>'+val.id+'</td>'+
        //     '<td>'+val.name+'</td>'+'<td>'+val.price+'</td>';
        //     tbody.appendChild(tr)    
        // }),

        //把遍历的方法封装一下，并渲染一下页面
        function setDate(mydate){
            // 先清空原来tobody里面的内容
            tbody.innerHTML=' ';
            mydate.forEach((val)=>{
            // console.log(val)
            tr=document.createElement('tr');
            tr.innerHTML='<td>'+val.id+'</td>'+
            '<td>'+val.name+'</td>'+'<td>'+val.price+'</td>';
            tbody.appendChild(tr)    
                }
            )
        }
        // 遍历数组
        setDate(data);
        seach.addEventListener('click',function(){
            // 过滤符合条件的新数组
           var newdata=data.filter(function(value){
               return value.price>=start.value&& value.price<=end.value;
           })
        //    console.log(newdata)
        // 把新数组进行再次遍历
            setDate(newdata)
        })
        // 根据商品名称查找元素
        query.addEventListener('click',function(){
            var arr=[];
            data.some((val)=>{
                // some方法找到该元素后就会终止循环，效率更高
                if(val.name===product.value){
                    arr.push(val)
                    return true;
                    //终止循环
                }
            });
            setDate(arr)
        })
    </script>
</body>
</html>

里面的css样式的确写的很粗糙，但主要是进行一些js练习的。。。

codetimev

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
es6查询商品小demo

最近再学习了一下es6语法，跟着学习了一个小demo添加链接描述主要完成了p41到p44的练习直接上代码吧…<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
复制链接

扫一扫