1：使用forEach循環渲染資料
ES6—19：查詢商品案例 代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.search {
width: 600px;
margin: 20px auto;
}
input {
width: 50px;
}
table {
width: 400px;
border-collapse: collapse;
margin: 0 auto;
}
td,th {
border: 1px solid;
border-collapse: collapse;
text-align: center;
}
</style>
</head>
<body>
<div class="search">
按照價格查詢：<input type="text"> - <input type="text">
<button class="search-price">搜尋</button> 按照商品名稱查詢：<input type="text" class="product"><button
class="search-pro">查詢</button>
</div>
<table>
<thead>
<tr>
<th>id</th>
<th>産品名稱</th>
<th>價格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var data = [{
id: 1,
pname: "小米",
price: 3999
}, {
id: 2,
pname: "oppo",
price: 999
}, {
id: 3,
pname: "榮耀",
price: 1299
}, {
id: 4,
pname: "華為",
price: 1999
}, ];
// 擷取相應的元素
var tbody = document.querySelector("tbody");
// 把資料渲染到頁面中
data.forEach(function(value) {
console.log(value.pname);
// 開始渲染
var tr = document.createElement('tr');
tr.innerHTML = '<td>'+ value.id +'</td><td>'+ value.pname +'</td><td>'+ value.price +'</td>';
tbody.appendChild(tr);
})
</script>
</body>
</html>
2：根據價格篩選商品
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.search {
width: 600px;
margin: 20px auto;
}
input {
width: 50px;
}
table {
width: 400px;
border-collapse: collapse;
margin: 0 auto;
}
td,
th {
border: 1px solid;
border-collapse: collapse;
text-align: center;
}
</style>
</head>
<body>
<div class="search">
按照價格查詢：<input type="text" class="start"> - <input type="text" class="end">
<button class="search-price">搜尋</button> 按照商品名稱查詢：<input type="text" class="product"><button
class="search-pro">查詢</button>
</div>
<table>
<thead>
<tr>
<th>id</th>
<th>産品名稱</th>
<th>價格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var data = [{
id: 1,
pname: "小米",
price: 3999
}, {
id: 2,
pname: "oppo",
price: 999
}, {
id: 3,
pname: "榮耀",
price: 1299
}, {
id: 4,
pname: "華為",
price: 1999
}];
// 擷取相應的元素
var tbody = document.querySelector("tbody");
// 根據價格篩選商品
// 擷取價格區間
var newarr;
var search_price = document.querySelector('.search-price');
search_price.onclick = function () {
let input_start = document.querySelector(".start");
let input_end = document.querySelector(".end");
let tbody = document.querySelector('tbody');
tbody.innerHTML = '';
newarr = data.filter(function (values) {
return values.price >= input_start.value && values.price <= input_end.value;
})
console.log(newarr);
if (newarr.length == 0) {
} else {
newarr.forEach(function (value) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price;
tbody.appendChild(tr);
})
}
}
// 根據商品名稱查詢
var search_pro = document.querySelector('.search-pro');
search_pro.onclick = function() {
let tbody = document.querySelector('tbody');
tbody.innerHTML = '';
var product = document.querySelector('.product');
data.forEach(function(values) {
if(product.value == values.pname) {
let tr = document.createElement('tr');
tr.innerHTML = '<td>' + values.id + '</td><td>' + values.pname + '</td><td>' + values.price;
tbody.appendChild(tr);
}
})
}
</script>
</body>
</html>
實作效果
ES6—19：查詢商品案例 
