当前位置：网站首页>Query product cases - page rendering data

Query product cases - page rendering data

2022-07-03 01:50:00 【Blizzard front end】

<!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">
         Inquire according to the price : <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price"> Search for </button>  Query by commodity name : <input type="text" class="product"> <button class="search-pro"> Inquire about </button>
    </div>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th> The product name </th>
                <th> Price </th>
            </tr>
        </thead>
        <tbody>
<!--  Data rendering to tbody in  -->

        </tbody>
    </table>
    <script> //  Use the new array method to manipulate data  var data = [{
       id: 1, pname: ' millet ', price: 3999 }, {
       id: 2, pname: 'oppo', price: 999 }, {
       id: 3, pname: ' glory ', price: 1299 }, {
       id: 4, pname: ' Huawei ', price: 1999 }, ]; // 1.  Get the corresponding element  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.  Render the data to the page  function setDate(mydata) {
       //  First empty the original tbody  The data in it  tbody.innerHTML = ''; mydata.forEach(function(value) {
       // console.log(value); var tr = document.createElement('tr'); // First create a row for each array element , Append this line to tbody Go to of  tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'; tbody.appendChild(tr); }); } // 3.  Query goods by price  //  When we hit the button , We can filter the objects in the array according to our commodity price  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); //  Render the filtered objects to the page  setDate(newDate); }); // 4.  Find products by product name  //  If you query the only element in the array ,  use some More appropriate , Because it finds this element , It's not a cycle , More efficient ] 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  It must be written after true  } }); //  Render the data to the page  setDate(arr); }) </script>
</body>

</html>

Insert picture description here

some and forEach difference

 <script>
        var arr = ['red', 'green', 'blue', 'pink'];
        // 1. forEach iteration   Traverse 
        console.log('forEach:');
        arr.forEach(function(value) {
    
            if (value == 'green') {
    
                console.log(' Found the element ');
                return true; //  stay forEach  Inside  return  The iteration will not be terminated 
            }
            console.log(11);

        })
        //  If you query the only element in the array ,  use some More appropriate ,
        console.log('some:');
        arr.some(function(value) {
    
            if (value == 'green') {
    
                console.log(' Found the element ');
                return true; //  stay some  Inside   encounter  return true  Is to stop traversal   Iteration is more efficient 
            }
            console.log(11);

        });
        // arr.filter(function(value) {
    
        // if (value == 'green') {
    
        // console.log(' Found the element ');
        // return true; // // filter  Inside  return  The iteration will not be terminated 
        // }
        // console.log(11);

        // });
    </script>