溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“javascript怎么實現查詢商品功能”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“javascript怎么實現查詢商品功能”吧！
本文實例為大家分享了javascript實現查詢商品功能的具體代碼，供大家參考，具體內容如下
這是沒有點擊查詢的主界面圖
這是點擊名稱查詢之后
按照價格查詢
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript查詢功能</title>
<style>
body{
font-family: "微軟雅黑";
font-size: 18px;
}
table {
width: 800px;
border: 1px solid #000;
border-collapse: collapse;
margin: 0 auto;
}
td,th {
border: 1px solid #000;
text-align: center;
}
input {
width: 70px;
}
.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">搜索</button>
<br><br>
按照商品名稱查詢: <input type="text" class="product">
<button class="search-pro">查詢</button>
</div>
<table>
<thead>
<tr>
<th>產品名稱</th>
<th>價格</th>
<th >處理器</th>
<th >屏幕</th>
<th >相機</th>
<th >電池</th>
<th >特色功能</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 利用新增數組方法操作數據
var data = [
{
pname: '華為mateX2',
price: 17999,
processor:'麒麟9000',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '華為mate40Pro',
price: 6599,
processor:'麒麟9000',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '華為mate40',
price: 4999,
processor:'麒麟9000E',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '華為mate30Pro',
price: 5499,
processor:'麒麟990',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '華為mate30',
price: 3599,
processor:'麒麟990',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '華為P40Pro',
price: 7999,
processor:'麒麟990',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '華為P40',
price: 3999,
processor:'麒麟990',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '榮耀30Pro',
price: 3999,
processor:'麒麟990',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '華為mate20Pro',
price: 1599,
processor:'麒麟980',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '小米11Pro',
price: 4799,
processor:'高通驍龍888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '小米11',
price: 3799,
processor:'高通驍龍888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '小米Mix4',
price: 5499,
processor:'高通驍龍888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '紅米K40Pro',
price: 2999,
processor:'高通驍龍888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: '紅米K40',
price: 1999,
processor:'高通驍龍870',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'VivoX60Pro',
price: 5499,
processor:'高通驍龍888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'VivoX60',
price: 3499,
processor:'獵戶座',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'OPPOReno6Pro',
price: '',
processor:'高通驍龍888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
];
// 1. 定義和獲取元素
var tbody = document.querySelector('tbody');/*定義tbody*/
var search_price = document.querySelector('.search-price');/*定義search-price*/
var processor=document.querySelector('.processor');/*定義處理器*/
var screen=document.querySelector('.screen');/*定義屏幕*/
var camera=document.querySelector('.camera');/*定義相機*/
var Battery=document.querySelector('.Battery');/*定義電池*/
var CharacteristicFunction=document.querySelector('.CharacteristicFunction');/*特色功能*/
var start = document.querySelector('.start');
var end = document.querySelector('.end');
var product = document.querySelector('.product');
setDate(data);
// 2. 把數據渲染到頁面中
function setDate(mydata) {
// 先清空原來tbody 里面的數據
tbody.innerHTML = '';
mydata.forEach(function(value) { /*添加*/
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + value.pname +'</td><td>'
+ value.price+'</td><td>'
+ value.processor+'</td><td>'
+ value.screen+'</td><td>'
+ value.camera+'</td><td>'
+ value.Battery+'</td><td>'
+ value.CharacteristicFunction+'</td>'
;
tbody.appendChild(tr);
});
}
// 3. 根據價格查詢商品
// 點擊按鈕,就可以根據商品價格去篩選數組里面的對象
search_price.addEventListener('click', function() {
var newDate = data.filter(function(value) {
return value.price >= start.value && value.price <= end.value;
});
console.log(newDate);
// 把篩選完之后的對象渲染到頁面中
setDate(newDate);
});
// 4.模糊查找---- 根據商品名稱查找商品模糊查找
product.addEventListener('keyup', function() {
// 把拿到的數據渲染到頁面中
var result = data.filter(function(value) {
if (value.pname.includes(product.value)) {
return value
}
})
setDate(result);
setDate(data.filter(function(value) {
if (value.pname.includes(product.value)) {
return value
}
}));
})
</script>
</body>
</html>感謝各位的閱讀，以上就是“javascript怎么實現查詢商品功能”的內容了，經過本文的學習后，相信大家對javascript怎么實現查詢商品功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
