产品布局-div+css+js 

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

　　

posted on 2023-06-19 17:18  水行者  阅读(16)  评论(0)  编辑  收藏  举报

导航