<style>
.check_list {
            position: absolute;
            right: 5%;
            top: 17%;
            width: 25%;
            height: 40%;
 }

 .check_list tr {
            height: 26px;
            line-height: 26px;
  }
  .check_list td {
            padding-top: 20px;
            color: white;
            text-align: center;
            font-size: 12px;
    }
/*列表文字过多省略隐藏*/
        .check_list span{
            display: inline-block;
            width: 4rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .check_tr{
            height: 90%;
            overflow: hidden;
        }
        .header {
            color: #00F9FF;
            font-size: 14px;
            line-height: 1.5rem;
            text-align: center;
        }
        .data-content{
            height: 87%;
            overflow: hidden;
        }
</style>
<div class="check_list">
            <h3 style="text-align: center">表头</h3>
            <div class="check_tr">
                <div class="header layui-row">
                    <div class="layui-col-md2">
                        <span>文件路径</span>
                    </div>
                    <div class="layui-col-md2">
                        <span>文件名称</span>
                    </div>
                    <div class="layui-col-md2">
                        <span>类型</span>
                    </div>
                    <div class="layui-col-md2">
                        <span>级别</span>
                    </div>
                    <div class="layui-col-md2">
                        <span>记录日志</span>
                    </div>
                    <div class="layui-col-md2">
                        <span>动作</span>
                    </div>
                </div>
                <div class="data-content">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-hover" id="car" >
                    </table>
                </div>
            </div>
        </div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
//引入layui
<script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>
 
<script>
var checkList = [
        {
            "filtErl": "usbfs://> ki",
            "fileName": "***",
            "fileType": "木马病毒",
            "fileLevel": "低危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "***",
            "fileType": "木马病毒",
            "fileLevel": "中危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "***",
            "fileType": "木马病毒",
            "fileLevel": "高危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "***",
            "fileType": "木马病毒",
            "fileLevel": "中危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "***",
            "fileType": "木马病毒",
            "fileLevel": "高危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "***",
            "fileType": "木马病毒",
            "fileLevel": "中危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "***",
            "fileType": "木马病毒",
            "fileLevel": "高危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "***",
            "fileType": "木马病毒",
            "fileLevel": "高危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "***",
            "fileType": "木马病毒",
            "fileLevel": "高危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "***",
            "fileType": "木马病毒",
            "fileLevel": "高危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "***",
            "fileType": "木马病毒",
            "fileLevel": "高危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "***",
            "fileType": "木马病毒",
            "fileLevel": "高危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "***",
            "fileType": "木马病毒",
            "fileLevel": "高危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "***",
            "fileType": "木马病毒",
            "fileLevel": "高危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "***",
            "fileType": "木马病毒",
            "fileLevel": "高危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "16",
            "fileType": "木马病毒",
            "fileLevel": "中危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "17",
            "fileType": "木马病毒",
            "fileLevel": "中危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "18",
            "fileType": "木马病毒",
            "fileLevel": "高危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "19",
            "fileType": "木马病毒",
            "fileLevel": "低危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "20",
            "fileType": "木马病毒",
            "fileLevel": "低危",
            "fileLog": "是",
            "action": "阻止"
        },
        {
            "filtErl": "usbfs://> ki",
            "fileName": "21",
            "fileType": "木马病毒",
            "fileLevel": "高危",
            "fileLog": "是",
            "action": "阻止"
        }
    ]
 
$(function () {
 getCheckList();
function getCheckList() {
            if (checkList) {
                $('#car').html("");
                for (var i = 0; i < checkList.length; i++) {
                    var level = '<td style="color:#F5AC28"><span>' + checkList[i].fileLevel + '</span></td>'
                    $('#car').append('<tr><td><span>' + checkList[i].filtErl + '</span></td><td><span>' + checkList[i].fileName + '</span></td><td><span>' + checkList[i].fileType + '</span></td>' + level + '<td><span>' + checkList[i].fileLog + '</span></td><td>                 <span>' + checkList[i].action + '</span></td></tr>')

                }
                $('td').addClass('layui-col-md2');
            }
        };
 
 
 
            //滚动列表
            var $uList = $("#car");
            var timer = null;
            function scrollList() {
                var scrollHeight = $("#car tr:first").height();
                $uList.stop().animate({
                    marginTop: -scrollHeight
                },
                900,
                function() {
                    $uList.css({
                        marginTop: 0
                    }).find("tr:first").appendTo($uList);
                });
            }
            $uList.hover(function() {
                clearInterval(timer);
            },
            function() { 
                timer = setInterval(function() {
                    scrollList();
                },
                1000);
            }).trigger("mouseleave");
        });
</script>
posted on 2021-02-02 11:01  追星程序媛  阅读(17)  评论(0编辑  收藏  举报