js数组淘宝筛选练习

最新推荐文章于 2022-12-26 13:19:46 发布

你若盛开风景自来

最新推荐文章于 2022-12-26 13:19:46 发布

阅读量161

点赞数

分类专栏： js 文章标签：数组

本文链接：https://blog.csdn.net/li1484155613/article/details/101870470

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!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>
    
</head>
<body>
    <input type="text" class="start">
    <input type="text" class="end">
    <input type="button" value="点击" class="btn">
    <table>
        <thead>
            <tr>
                <td>id</td>
                <td>price</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
<script>
    var data=[
        {
            id:1,
            price:1000
        },
        {
            id:2,
            price:2000
        },
        {
            id:3,
            price:2430
        },
        {
            id:4,
            price:3999
        },
        {
            id:5,
            price:4999
        },
    ]
    var tbody=document.querySelector("tbody")
    var start=document.querySelector(".start")
    var end=document.querySelector(".end")
    var btn=document.querySelector(".btn")
    //页面渲染
    Data(data)
    function Data(mydata){
        mydata.forEach(function(value){
        var tr=document.createElement("tr")
        tr.innerHTML="<td>"+value.id+"</td><td>"+value.price+"</td>"
        tbody.appendChild(tr)
    })
    }
    //选择
    btn.addEventListener("click",function(){
        tbody.innerHTML=""
        var newdata=data.filter(function(value){
            return value.price>=start.value&&value.price<=end.value
        })
        Data(newdata)
    })
    
</script>
</html>

你若盛开风景自来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js数组淘宝筛选练习

<!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-U...
复制链接

扫一扫