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