JS实现商品查询实战：价格与名称筛选示例

本文将详细介绍如何使用JavaScript实现一个简单的商品查询功能，包括前端HTML结构、CSS样式以及相关的JavaScript代码。首先，我们看到HTML部分构建了一个包含两个查询条件的表单：一个是价格查询范围，用户可以通过输入框指定起始和结束价格；另一个是商品名称查询，用户输入商品名称后进行搜索。这两个输入框都配合相应的按钮进行操作。 HTML结构中，`<input>`元素用于收集用户输入，`<button>`元素用于触发查询动作，如： ```html <div class="search"> <label for="startPrice">按照价格查询：</label> <input type="text" class="start" id="startPrice"> <label for="endPrice"> - </label> <input type="text" class="end" id="endPrice"> <button class="search-price">搜索</button> <label for="productName">按照商品名称查询：</label> <input type="text" class="product" id="productName"> <button class="search-prro">查询</button> </div> ``` 接下来是表格部分，用于显示商品列表，包含id、产品名称和价格三个列： ```html <table> <thead> <tr> <th>ID</th> <th>产品名称</th> <th>价格</th> </tr> </thead> <tbody> <!-- 这里是实际的商品数据，省略了部分示例 --> </tbody> </table> ``` CSS部分设置了页面布局和表格样式，例如居中显示搜索区域和表格，以及定义了边框和对齐方式： ```css .search { text-align: center; } table { width: 1000px; margin: 0 auto; table-layout: fixed; } th, tr, td { border: 1px solid #ccc; text-align: center; height: 50px; } ``` JavaScript部分的核心逻辑是处理用户输入并筛选商品数据。这里假设"data"数组存储了商品信息，每个对象有"id", "pname", "price"等属性。一个基本的查询函数可以是这样： ```javascript <script> var data = [ // 商品数据... ]; function searchProducts(priceStart, priceEnd, productName) { let filteredData = data.filter(item => { return (priceStart <= item.price && item.price <= priceEnd) || (item.pname.toLowerCase().includes(productName.toLowerCase())); }); // 渲染或替换tbody内容 const tbody = document.querySelector('tbody'); tbody.innerHTML = ''; filteredData.forEach(product => { const row = `<tr><td>${product.id}</td><td>${product.pname}</td><td>${product.price}</td></tr>`; tbody.insertAdjacentHTML('beforeend', row); }); } // 钩子函数，当用户触发搜索时执行 document.querySelector('.search-price').addEventListener('click', function() { const startPrice = parseInt(document.querySelector('.start').value); const endPrice = parseInt(document.querySelector('.end').value); const productName = document.querySelector('.product').value; searchProducts(startPrice, endPrice, productName); }); document.querySelector('.search-prro').addEventListener('click', function() { const productName = document.querySelector('.product').value; searchProducts(null, null, productName); }); </script> ``` 这个案例展示了如何在JavaScript中结合HTML和CSS创建一个简单的商品查询功能，用户可以根据价格范围或商品名称筛选商品列表。实际应用中，你可能需要根据数据库或API接口来动态获取和更新商品数据。