动态的将数据生成“表格”（京东商品），并具备搜索筛选工能
<!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">
<link rel="stylesheet" href="https://s02.mifile.cn/assets/css/home.4d28adf4.css">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
img {
vertical-align: top;
}
.w {
width: 1226px;
margin: 0 auto;
}
.searchBox {
overflow: hidden;
margin-top: 50px;
}
.searchBox .searchCon {
border: 1px solid grey;
width: 295px;
height: 50px;
box-sizing: border-box;
outline: none;
vertical-align: middle;
padding-left: 10px;
}
.searchBox .searchBtn {
border: 1px solid grey;
width: 50px;
height: 50px;
box-sizing: border-box;
border-left: 0;
outline: none;
vertical-align: middle;
}
.showList {
margin-top: 20px;
}
.showList:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="searchBox w">
<input type="text" class="searchCon" value=""><button class="searchBtn">搜索</button>
</div>
<div class="showList w">
<!-- <li class="brick-item brick-item-m brick-item-m-2">
<a>
<div class="figure figure-img">
<img width="160" height="160" alt="Redmi K30"
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg?thumb=1&w=250&h=250&f=webp&q=90"
lazy="loaded"></div>
<h3 class="title">
Redmi K30
</h3>
<p class="desc">120Hz流速屏，全速热爱</p>
<p class="price"><span class="num">1599</span>元<span>起</span></p>
</a>
</li> -->
</div>
</body>
<script>
// JSON (假数据)
var goodsList = [{
goodsId: "A001",
goodsName: "Redmi K30",
goodsMsg: "120Hz流速屏，全速热爱",
goodsImg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg?thumb=1&w=250&h=250&f=webp&q=90",
goodsPrice: 1599
},
{
goodsId: "A002",
goodsName: "小米CC9 Pro",
goodsMsg: "1亿像素 五摄四闪",
goodsImg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/07270cc09689eb9b13b29aa9f6bc41eb.jpg?thumb=1&w=250&h=250&f=webp&q=90",
goodsPrice: 2599
},
{
goodsId: "A003",
goodsName: "Redmi Note 8 Pro",
goodsMsg: "6400万全场景四摄",
goodsImg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6f2493e6c6fe8e2485c407e5d75e3651.jpg?thumb=1&w=250&h=250&f=webp&q=90",
goodsPrice: 1199
},
{
goodsId: "A004",
goodsName: "小米9 Pro 5G",
goodsMsg: "5G双卡全网通，骁龙855Plus",
goodsImg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ca9b4f81af709935556bef9aa21a90e8.jpg?thumb=1&w=250&h=250&f=webp&q=90",
goodsPrice: 3699
}
];
var showList = document.querySelector(".showList");
var searchCon = document.getElementsByClassName("searchCon")[0];
var searchBtn = document.getElementsByClassName("searchBtn")[0];
// console.log(showList);
// 内容生成表格
/*
// 通过document.querySelectorAll 方法获取的元素的集合 此集合一经设置 不会改变(增和删 会影响集合)
// var titleList = document.querySelectorAll(".title");
//通过 getElementsByClassName getElementsByTagName getElementsByName 每次调用会重新获取页面中的元素(增和删 会影响集合)
// var titleList = document.getElementsByClassName("title");
// console.log(titleList);
*/
/*
// JS 动态生成
1. dom生成 (动态的创建dom 元素放到页面中)
优点: 可以再生成的同时 绑定事件
缺点: 对于复杂的html结构 太过于繁琐(浪费时间)
var li = document.createElement("li");
var a = document.createElement("a");
li.appendChild(a);
showList.appendChild(li);
2. 借助字符串模板动态生成
优点： 可以快速生成对应的结构
缺点： 绑定事件时相对麻烦
(1) 通过html内联结构 onclick 绑定事件(数据可见)
<h3 class="title" onclick="fn('${goodsId}','${goodsName}')">
${goodsName}
</h3>
(2) 先动态生成 在获取元素 绑定事件
(3) 通过事件委托绑定事件
html += `<li class="brick-item brick-item-m brick-item-m-2" proId="${goodsId}">
<a>
<div class="figure figure-img">
<img width="160" height="160" alt="Redmi K30"
src="${goodsImg}"
lazy="loaded"></div>
<h3 class="title">
${goodsName}
</h3>
<p class="desc">${goodsMsg}</p>
<p class="price"><span class="num">${goodsPrice}</span>元<span>起</span>
<!---->
</p>
</a>
</li>`;
*/
var html = "";
goodsList.forEach(function (item, index) {
var {
goodsId,
goodsName,
goodsMsg,
goodsImg,
goodsPrice
} = item;
html += `<li class="brick-item brick-item-m brick-item-m-2">
<a>
<div class="figure figure-img">
<img width="160" height="160" alt="Redmi K30"
src="${goodsImg}"></div>
<h3 class="title">
${goodsName}
</h3>
<p class="desc"> ${goodsMsg}</p>
<p class="price"><span class="num">${goodsPrice}</span>元<span>起</span></p>
</a>
</li>`
})
showList.innerHTML = html;
// 搜索功能
searchCon.oninput = searchBtn.onclick = function () {
var con = searchCon.value;
var list = goodsList.filter(function (item, index) {
var {
goodsName
} = item;
return goodsName.toLowerCase().indexOf(con.toLowerCase()) != -1;
})
var html = "";
list.forEach(function (item, index) {
// console.log(item);
// var goodsId = item.goodsId;
// var goodsName = item.goodsName;
// var goodsMsg = item.goodsMsg;
// var goodsImg = item.goodsImg;
// var goodsPrice = item.goodsPrice;
// console.log(goodsId, goodsName, goodsMsg, goodsImg, goodsPrice);
var {
goodsId,
goodsName,
goodsMsg,
goodsImg,
goodsPrice
} = item;
html += `<li class="brick-item brick-item-m brick-item-m-2">
<a>
<div class="figure figure-img">
<img width="160" height="160" alt="Redmi K30"
src="${goodsImg}"></div>
<h3 class="title">
${goodsName}
</h3>
<p class="desc"> ${goodsMsg}</p>
<p class="price"><span class="num">${goodsPrice}</span>元<span>起</span></p>
</a>
</li>`
showList.innerHTML = html;
})
}
// 动态生成 (把html渲染到页面上)
// 第2种
// 生成之后 获取元素 绑定事件
// var titleList = document.querySelectorAll(".title");
// console.log(titleList);
// for (let i = 0; i < titleList.length; i++) {
// let title = titleList[i];
// title.onclick = function () {
// alert(this.innerText);
// }
// }
// 第三种
//事件委托绑定事件 (1.节省内存 提高代码运行速度 2. 可以给未来生成的元素绑定事件)
showList.onclick = function (e) {
var e = e || window.event;
if (e.target.className == "title") {
alert(e.target.innerText);
}
}
</script>
</html>
