动态的将数据生成“表格”（京东商品），并具备搜索筛选工能

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

}

li {

list-style: none;

}

img {

vertical-align: top;

}

.w {

1226px;

margin: 0 auto;

}

.searchBox {

overflow: hidden;

margin-top: 50px;

}

.searchBox .searchCon {

border: 1px solid grey;

295px;

height: 50px;

box-sizing: border-box;

outline: none;

vertical-align: middle;

padding-left: 10px;

}

.searchBox .searchBtn {

border: 1px solid grey;

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>

<!-- <li class="brick-item brick-item-m brick-item-m-2">

<a>

<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>

Redmi K30

</h3>

<p class="desc">120Hz流速屏，全速热爱</p>

</a>

</li> -->

</div>

</body>

// 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 绑定事件(数据可见)

${goodsName}

</h3>

(2) 先动态生成在获取元素绑定事件

(3) 通过事件委托绑定事件

html += `<li class="brick-item brick-item-m brick-item-m-2" proId="${goodsId}">

<a>

<img width="160" height="160" alt="Redmi K30"

src="${goodsImg}"

lazy="loaded"></div>

${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>

<img width="160" height="160" alt="Redmi K30"

src="${goodsImg}"></div>

${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>

<img width="160" height="160" alt="Redmi K30"

src="${goodsImg}"></div>

${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>