标签：search name -- price 发博 value 新人 var id
今天的这个案例 使用到的es5的语法 数组的三个遍历的方法 分别是 forEach filter and some 这个案例是让我好好体会了一下 这三个数组 亦或者是es5语法的魅力 还是遇到了一个小难点的 各位可以在代码中找找 哈哈
<!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">
按照价格查询: <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>
// 1.动态渲染数据
var data = [
{
id : 1,
name : 'oppo',
price : 3999
},
{
id : 2,
name : '小米',
price : 999
},
{
id : 3,
name : '荣耀',
price : 1299
},
{
id : 4,
name : '华为',
price : 6999
}
]
var tBody = document.querySelector('tbody')
// 2.1 这个函数下面还要执行一次 干脆封装起来
function loopArr(arr) {
// 2.2先清空一下 不然后面重建表格不太好建
tBody.innerHTML = ''
arr.forEach(function (value,index) {
var tr = document.createElement('tr')
// 2.3下面按照价格查询有个小bug 出来的id 还是原来的 所以不应该取数据里面的id 新表格就应该重新排列 新的id顺序
var index = index + 1
tr.innerHTML = '<td>'+ index +'</td><td>'+value.name+'</td><td>'+value.price+'</td>'
tBody.appendChild(tr)
})
}
loopArr(data)
// 第二个 版块 按照价格查询
var search = document.querySelector('.search')
search.children[2].addEventListener('click', function() {
var minVal = search.firstElementChild.value
var maxVal = search.children[1].value
// console.log(minVal, maxVal);
var datas = data.filter(function(value) {
return value.price >= minVal && value.price <= maxVal
})
// console.log(datas);
// 能找到返回成功的数据 数组保存起的 nice 那我就重新对表格来个 分配不就完事了
// 封装好了函数 再次执行
loopArr(datas)
})
// 3.按照商品名称查询
search.lastElementChild.addEventListener('click',function() {
var str = this.previousElementSibling.value
// console.log(str);
// 3.1这里我们就比作每个商品名称就只有一种 意思就是名称不太容易重名 所以用数组的some方法 可以更快一点
var newValue
data.some(function(value) {
// 原本打算这么做 但是调试看了一下 死活都不给我true 对上了都视而不见一样
/* value = value.name
return str === value.name */
if (str == value.name) {
newValue = value
return true
}
})
// console.log(newValue);
// 不建议采用原来数组赋值 应该创建一个新数组 这里只是图快速一点
if (newValue != undefined) {
data = [newValue]
loopArr(data)
}
})
</script>
</body>
</html>
标签：search,name,--,price,发博,value,新人,var,id 来源： https://www.cnblogs.com/heymar/p/15681003.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。