查询商品案例 ES5新增方法

最新推荐文章于 2024-06-09 20:17:27 发布

周百万.

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量194

点赞数

分类专栏： javascript 文章标签： javascript 前端 ES5 some方法查询商品

本文链接：https://blog.csdn.net/m0_45142186/article/details/126982914

版权

javascript 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

1、主要步骤

1、把数据渲染到页面

forEach( )方法遍历数组

createElement 动态创建元素

appendChild 在子元素的子类最后面插入

2、根据价格显示数据

filter( )方法遍历数据，以数组的形式返回

3、根据商品名称显示数据

some( )方法查找数组中唯一的元素找到元素后就不再循环，效率更高

创建空数组，将some( )方法中返回的数据用push( )方法插入到数组中

再用之前渲染数据封装的函数渲染页面

4、键盘事件点击回车查询数据

5、点击主页按钮，重新渲染之前的数据(显示主页内容)

2、html和css代码

简写即可，注意导包

html代码:

<link rel="stylesheet" href="shop.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

</head>

<body>
    <div class="w">
        <header>
            <button id="index">主页</button> 按照价格查询：<input type="text" id="min"><input type="text" id="max"><button id="btn">按钮</button> 按照商品名称查询：
            <input type="text" id="names"><button id="search">查询</button>
        </header>
        <div class="main">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>产品名称</th>
                        <th>价格</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
        <script src="shop.js"></script>
</body>

</html>

css代码: shop.css

* {
    margin: 0;
    padding: 0;
}

.w {
    width: 1200px;
    margin: 0 auto;
}

input {
    margin-left: 7px;
}

.w header button {
    margin-right: 100px;
    margin-left: 10px;
    padding: 2px 10px;
}

button:last-child {
    margin-right: 0!important;
}

button:first-child {
    margin-left: 0!important;
}

3、js代码

自定义一个data数组，里面装着一个个对象，后期学Ajax可以从服务器获取数据

注释挺详细，有问题欢迎评论指正！

js代码： shop.js

// 定义一个data数组，里面装着一个个对象
var data = [{
        id: 1,
        pname: '小米',
        price: 3999
    },
    {
        id: 2,
        pname: 'oppo',
        price: 2999
    },
    {
        id: 3,
        pname: '荣耀',
        price: 8799
    },
    {
        id: 4,
        pname: '华为',
        price: 6499
    },
    {
        id: 5,
        pname: '苹果',
        price: 9499
    },
    {
        id: 6,
        pname: '菠萝',
        price: 499
    },
    {
        id: 7,
        pname: '香蕉',
        price: 899
    }
];
// 获取元素
var min = document.querySelector('#min');
var max = document.querySelector("#max")
var btn = document.querySelector("#btn");
var names = document.querySelector("#names");
var search = document.querySelector("#search");
var tbody = document.querySelector('tbody');
var index = document.querySelector("#index");
// 把数据渲染到页面中
getLIst(data)

function getLIst(datas) {
    datas.forEach(function(value) {
        var tr = document.createElement('tr');
        tr.innerHTML = '<td>' + value.id + '</td><td> ' + value.pname + '</td><td> ' + value.price + '</td>';
        tbody.appendChild(tr);
    });
}


// 根据价格查询商品
btn.onclick = function() {
        tbody.innerHTML = '';
        var arr1 = data.filter(function(value) {
            return value.price >= min.value && value.price <= max.value;
        });
        // 把返回来的数组，在渲染到页面中
        getLIst(arr1);
    }
    // 根据输入的数据查询商品
search.onclick = function() {
        tbody.innerHTML = '';
        var arr2 = [];
        data.some(function(value) {
            if (value.pname == names.value) {
                // 如果能匹配成功就把当前的value插入到数组中
                arr2.push(value);
                // return true 遇到符合条件的第一个就不执行后面的
                return true;
            }
        })
        getLIst(arr2);
    }
    // 在max中输入完成后，点击回车键可以进行搜索
max.onkeypress = function(e) {
        if (e.keyCode == 13) {
            btn.onclick();
        }
    }
    // 当在names  input中按回车，也能执行查询事件
names.onkeypress = function(e) {
    if (e.keyCode == 13) {
        search.onclick();
    }
}
index.onclick = function() {
    tbody.innerHTML = '';
    getLIst(data);
}

周百万.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
查询商品案例 ES5新增方法

1、主要步骤1、把数据渲染到页面 forEach( )方法遍历数组 createElement 动态创建元素 appendChild 在子元素的子类最后面插入2、根据价格显示数据 filter( )方法遍历数据，以数组的形式返回3、根据商品名称显示数据 some( )方法查找数组中唯一的元素找到元素后就不再循环，效率更
复制链接

扫一扫