<!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>
<!-- <link rel="stylesheet" href="./css/index.css"> -->
<style>
.contanier {
display: flex;
flex-direction: column;
}
.contanier .row-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
line-height: 50px;
}
.contanier .row-header .item-list {
text-align: center;
flex: 1;
}
.contanier .row-header .item-header {
text-align: center;
width: 100px;
}
.contanier .row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border: solid 1px;
border-bottom: solid 0px;
}
.contanier .row:last-child {
border: solid 1px;
}
.contanier .row .item-list {
text-align: center;
flex: 1;
}
.contanier .row .item-header {
text-align: center;
width: 100px;
border-right: solid 1px;
}
</style>
</head>
<body>
<div class="contanier" id="contanier">
<div class="row-header" id="row-header">
<div class="item-header"> </div>
<!-- <div class="item-list">C分类</div>
<div class="item-list">D分类</div> -->
</div>
<!-- <div class="row">
<div class="item-header">A级</div>
<div class="item-list">
<div class="item">CA1</div>
<div class="item"> CA2</div>
</div>
<div class="item-list">
<div class="item">DA1</div>
<div class="item">DA2</div>
</div>
<div class="item-list">
<div class="item">DA1</div>
<div class="item">DA2</div>
</div>
</div>
<div class="row">
<div class="item-header">B级</div>
<div class="item-list">
<div class="item">CB1</div>
<div class="item">CB2</div>
</div>
<div class="item-list">
<div class="item">DB1</div>
<div class="item">DB2</div>
</div>
</div> -->
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
let product_class_list = ['云服务器', '运维']
let product_type_list = ['A类', 'B类', 'C类']
let product_list = [{
id: 1,
name: '云服务器G1',
className: '云服务器',
typeName: 'A类'
}, {
id: 2,
name: '云服务器G2',
className: '云服务器',
typeName: 'A类'
}, {
id: 3,
name: '云服务器B1',
className: '云服务器',
typeName: 'B类'
}, {
id: 4,
name: '云服务器B2',
className: '云服务器',
typeName: 'B类'
}, {
id: 5,
name: '云服务器C1',
className: '云服务器',
typeName: 'C类'
}, {
id: 6,
name: '云服务器C2',
className: '云服务器',
typeName: 'C类'
}, {
id: 7,
name: '运维A1',
className: '运维',
typeName: 'A类'
}, {
id: 8,
name: '运维B1',
className: '运维',
typeName: 'B类'
}, {
id: 8,
name: '运维B33',
className: '运维',
typeName: 'B类'
}]
for (let i = 0; i < product_class_list.length; i++) {
const item = product_class_list[i];
$('#row-header').append(`<div class="item-list">${item}</div>`)
}
for (let i = 0; i < product_type_list.length; i++) {
const item = product_type_list[i];
let _html = ` <div class="row">`
_html += `<div class="item-header">${item}</div>`
for (let c = 0; c < product_class_list.length; c++) {
const c_item = product_class_list[c]
// 添加item-list
_html += `<div class="item-list">`
//添加 item 需要判断从product_list 获取符合以下条件的 等于 product_type_list的item && product_class_list的c.item
console.log(item)
console.log("c_time", c_item)
let p_list = product_list.filter(p => {
return p.className == c_item && p.typeName == item
})
console.log(p_list)
p_list.forEach(p => {
_html += ` <div class="item">${p.name}</div>`
})
_html += ` </div>`
}
_html += `</div>`
$('#contanier').append(_html)
}
</script>
</body>
</html>
产品布局-div+css+js
最新推荐文章于 2024-06-19 16:19:47 发布