js 模糊查询

最新推荐文章于 2024-10-08 21:33:02 发布

奋斗的小小骚年

最新推荐文章于 2024-10-08 21:33:02 发布

阅读量524

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41654985/article/details/79773206

版权

JavaScript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table
        {
            border-collapse: collapse;
            text-align: center;
        }
        td
        {
            width: 80px;
            height: 30px;
            border: 1px solid #000000;
        }
    </style>
</head>
<body>
<input type="text" id="texts"><label for="texts"></label>
<table id="table"></table>
<script>

    var phoneList=[
        {checked:true,icon:"img/icon_a.jpeg",brand:"Apple",goods:"Iphone X",num:1, color:"black", price:7988},
        {checked:false,icon:"img/icon_b.jpeg",brand:"Oppo",goods:"Oppo R9",num:1, color:"black", price:2500},
        {checked:true,icon:"img/icon_c.jpeg",brand:"huaWei",goods:"HuaWei",num:1, color:"black", price:2588},
        {checked:false,icon:"img/icon_d.jpeg",brand:"Xiaomi",goods:"Note",num:1, color:"black", price:2488},
        {checked:true,icon:"img/icon_e.jpeg",brand:"Sanxing",goods:"sanxing",num:1, color:"black", price:8888}
    ];
    var text=document.getElementById("texts");
    var table=document.getElementById("table");
    createTable(phoneList);
    text.addEventListener("input",inputHandler);
    function inputHandler(e) {
        e=e||window.event
        var s=text.value
        var arr=[];
        phoneList.forEach(function (t) {
            if(t.goods.indexOf(s)>-1){
                arr.push(t)
            }
        })
        createTable(arr)
    }
    function createTable(data) {
        var str="";
        str+="<tr>";
        for(var i in data[0]){
            str+="<th>"+i+"</th>"
        }
        str+="</tr>";
        data.forEach(function (t) {
            str+="<tr>";
            for(var j in t){
                if(j==="checked"){
                    str+="<td><input type='checkbox' "+(t[j]?"checked":"")+"></td>";
                    continue;
                }
                if (j==="num"){
                    str+="<td><input type='text' value='"+t[j]+"'></td>";
                    continue;
                }
                if(j==="icon") {
                    str+="<td><img src='"+t[j]+"'></td>";
                    continue;
                }
                str+="<td>"+t[j]+"</td>"
            }
            str+="</tr>"
        });
        table.innerHTML=str;
    }



</script>
</body>
</html>