How to realize the function of querying goods by javascript

This article mainly explains the "javascript how to query goods function", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "javascript how to query goods function" bar!

This paper gives you an example to share the specific code of javascript to realize the function of querying goods for your reference. The specific contents are as follows.

This is the main interface without clicking on the query.

This is after clicking the name to query.

Inquire according to price

Code:

JavaScript query function body {font-family: "Microsoft Acer"; 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 } query by price:-search

Query by product name: query product name, price processor, screen camera battery features / / use the new array method to manipulate data var data = [{pname: 'Huawei mateX2', price: 17999, processor:' Kirin 9000, screen:'', camera:'', Battery:'' CharacteristicFunction:'',}, {pname: 'Huawei mate40Pro', price: 6599, processor:' Kirin 9000, screen:'', camera:'', Battery:'', CharacteristicFunction:'',}, {pname:' Huawei mate40', price: 4999, processor:' Kirin 9000E, screen:'', camera:'', Battery:'', CharacteristicFunction:'',}, {pname: 'Huawei mate30Pro', price: 5499 Processor:' Kylin 990, screen:'', camera:'', Battery:'', CharacteristicFunction:'',}, {pname: 'Huawei mate30', price: 3599, processor:' Kirin 990, screen:'', camera:'', Battery:'', CharacteristicFunction:'',}, {pname:' Huawei P40 Profiles, price: 7999, processor:' Kirin 990, screen:'', camera:'' Battery:'', CharacteristicFunction:'',}, {pname: 'Huawei P40, price: 3999, processor:' Kirin 990, screen:'', camera:'', Battery:'', CharacteristicFunction:'',}, {pname:' glory 30 Productions, price: 3999, processor:' Kirin 990, screen:'', camera:'', Battery:'', CharacteristicFunction:'',} {pname: 'Huawei mate20Pro', price: 1599, processor:' Kirin 980, screen:'', camera:'', Battery:'', CharacteristicFunction:'',}, {pname:' Xiaomi 11 Productions, price: 4799, processor:' Qualcomm Snapdragon 888cm, screen:'', camera:'', Battery:'', CharacteristicFunction:'',}, {pname: 'Xiaomi 1111, price: 3799 Processor:' Qualcomm Snapdragon 888, screen:'', camera:'', Battery:'', CharacteristicFunction:'',}, {pname: 'Xiaomi Mix4', price: 5499, processor:' Qualcomm Snapdragon 888, screen:'', camera:'', Battery:'', CharacteristicFunction:'',}, {pname:' Hongmi K40 Propagation, price: 2999, processor:' Qualcomm Snapdragon 888, screen:'' Camera:'', Battery:'', CharacteristicFunction:'',}, {pname: 'Hongmi K40cm, price: 1999, processor:' Qualcomm Snapdragon 870mm, screen:'', camera:'', Battery:'', CharacteristicFunction:'',}, {pname:' VivoX60Pro', price: 5499, processor:' Qualcomm Snapdragon 888cm, screen:'', camera:'', Battery:'', CharacteristicFunction:'',} {pname: 'VivoX60', price: 3499, processor:' Orion', screen:'', camera:'', Battery:'', CharacteristicFunction:'',}, {pname: 'OPPOReno6Pro', price:', processor:' Qualcomm Snapdragon 888, screen:'', camera:'', Battery:'', CharacteristicFunction:'',},] / / 1. Define and get the element var tbody = document.querySelector ('tbody'); / * define tbody*/ var search_price = document.querySelector ('. Search-price'); / * define search-price*/ var processor=document.querySelector ('.processor'); / * define processor * / var screen=document.querySelector ('.screen'); / * define screen * / var camera=document.querySelector ('.camera'); / * define camera * / var Battery=document.querySelector ('.Battery') / * define battery * / var CharacteristicFunction=document.querySelector ('.Characteristic function'); / * feature * / var start = document.querySelector ('.start'); var end = document.querySelector ('.end'); var product = document.querySelector ('.product'); setDate (data); / / 2. Render the data to the page function setDate (mydata) {/ / first clear the data in the original tbody [XSS _ clean] ='; mydata.forEach (function (value) {/ * add * / var tr = document.createElement ('tr') T [XSS _ clean] =''+ value.pname +''+ value.price+'' + value.processor+'' + value.screen+'' + value.camera+'' + value.Battery+'' + value.CharacteristicFunction+''; tbody.appendChild (tr);});} / / 3. By querying goods by price / / clicking the button, you can filter the objects in the array search_price.addEventListener ('click', function () {var newDate = data.filter (function (value) {return value.price > = start.value & & value.price) according to the price of goods.