使用数组新增方法查询数据实例

最新推荐文章于 2024-04-25 00:00:00 发布

小李看前端

最新推荐文章于 2024-04-25 00:00:00 发布

阅读量169

点赞数

分类专栏： js基础编文章标签： javascript 前端

本文链接：https://blog.csdn.net/lzDevastator/article/details/105195578

版权

js基础编专栏收录该内容

24 篇文章 1 订阅

订阅专栏

实例

<!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" id="search">搜索</button> 按照商品名称查询:
      <input type="text" class="product" />
      <button class="search-pro" id="probtn">查询</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>产品名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      var data = [
        {
          id: 1,
          pname: "小米",
          price: 2999
        },
        {
          id: 2,
          pname: "华为",
          price: 4999
        },
        {
          id: 3,
          pname: "苹果",
          price: 9999
        },
        {
          id: 4,
          pname: "oppo",
          price: 500
        },
        {
          id: 5,
          pname: "vivo",
          price: 1200
        }
      ];
      //获取相应元素
      var oTbody = document.querySelector("tbody");
      var oSearch = document.querySelector("#search");
      var oStart = document.querySelector(".start");
      var oEnd = document.querySelector(".end");
      var oProduct = document.querySelector(".product");
      var oProBtn = document.querySelector("#probtn");

      setData(data);
      function setData(myData) {
        oTbody.innerHTML = "";
        myData.forEach(function(value) {
          var tr = document.createElement("tr");
          tr.innerHTML =
            "<td>" +
            value.id +
            "</td><td>" +
            value.pname +
            "</td><td>" +
            value.price +
            "</td>";
          oTbody.appendChild(tr);
        });
      }
      oSearch.addEventListener("click", function() {
        if (oStart.value == "" || oEnd.value == "") {
           setData(data);
           return null
        }
        var newData = data.filter(function(value) {
          return value.price >= oStart.value && value.price <= oEnd.value;
        });
        console.log(newData);

        setData(newData);
      });
      oProBtn.addEventListener('click',function () {  
          var arr = [];
          data.some(function (value) {  
              if(value.pname == oProduct.value){
                arr.push(value)
                return true
              }
          })
          setData(arr)
      })
    </script>
  </body>
</html>