html实现简单审批流程图_前端审批流程图-CSDN博客

本文链接：https://blog.csdn.net/qq_43144825/article/details/119140437

在这里插入图片描述

<script src="./lib/bootstrap.min.js"></script>
<script src="./lib/jquery-3.7.1.min.js"></script>

<style>
    ul li{
        font-size: small;
    }

    ul li::marker{
        font-size: 20px;
    }
    .line{
        padding-left: 10px;
        font-size:small;
    }
    .dynamica{
        list-style: none;
    }
</style>
<script>

    var data={
            status:[
                {
                    des:'STEP1',
                    date:'2021-6-20',
                    isStatus: false,
                },
                {
                    des:'STEP2',
                    date:'2021-6-21',
                    isStatus: false,
                },
                {
                    des:'STEP3',
                    date:'2021-6-22',
                    isStatus: false,
                },
                {
                    des:'请根据相关规定完善信息',
                    date:'2021-6-23',
                    isStatus: true,
                },
                {
                    des:'STEP4',
                    date:'2021-6-24',
                    isStatus: false,
                },
                {
                    des:'请根据相关规定完善信息',
                    date:'2021-6-25',
                    isStatus: true,
                },
                {
                    des:'STEP5',
                    date:'2021-6-26',
                    isStatus: false,
                },
            ]
        }

</script>
<body>
    <ul id="checkStatus" style="margin-left: 50px;margin-top: 20px" >
    </ul>
</body>

<script>
    $(function (){
        var status = data.status;
        var dynamicUl = document.getElementById("checkStatus");
        var htmlliElement = document.createElement('li');
        htmlliElement.innerHTML='<li><a>'+status[0].des+'</a><a style="padding-left: 20px">'+status[0].date+'</a></li>';
        dynamicUl.appendChild(htmlliElement);
        for (let i = 1; i < status.length; i++) {

            if(!status[i].isStatus){
                let htmlaElement = document.createElement('li');
                htmlaElement.className='dynamica'
                htmlaElement.innerHTML='<a class="line">I</a><br> <a class="line">I</a><br> <a class="line">I</a><br>';
                dynamicUl.appendChild(htmlaElement);
                let htmlliElement=document.createElement('li');
                htmlliElement.innerHTML='<li><a>'+status[i].des+'</a><a style="padding-left: 20px">'+status[i].date+'</a></li>'
                dynamicUl.appendChild(htmlliElement);
            }else{
                let htmlaElement = document.createElement('li');
                htmlaElement.className='dynamica'
                htmlaElement.innerHTML='<a class="line">I</a><br> <a class="line">I</a><br> <a class="line">I</a><br><a class="line">I</a><a style="padding-left: 30px">'+status[i].des+'</a><a>'+status[i].date+'</a>';
                dynamicUl.appendChild(htmlaElement);
            }
        }
    });
</script>
</html>