当前位置：网站首页>查询商品案例-页面渲染数据

查询商品案例-页面渲染数据

2022-07-03 01:17:00 【Blizzard前端】

<!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中 -->

        </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'); //先为每个数组元素创建一个行，在把这个行追加到tbody当中去 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>

在这里插入图片描述

some和forEach区别

 <script>
        var arr = ['red', 'green', 'blue', 'pink'];
        // 1. forEach迭代 遍历
        console.log('forEach:');
        arr.forEach(function(value) {
    
            if (value == 'green') {
    
                console.log('找到了该元素');
                return true; // 在forEach 里面 return 不会终止迭代
            }
            console.log(11);

        })
        // 如果查询数组中唯一的元素, 用some方法更合适,
        console.log('some:');
        arr.some(function(value) {
    
            if (value == 'green') {
    
                console.log('找到了该元素');
                return true; // 在some 里面 遇到 return true 就是终止遍历 迭代效率更高
            }
            console.log(11);

        });
        // arr.filter(function(value) {
    
        // if (value == 'green') {
    
        // console.log('找到了该元素');
        // return true; // // filter 里面 return 不会终止迭代
        // }
        // console.log(11);

        // });
    </script>