利用layui框架完成中国功夫明星统计表格

原创 2019-02-12 19:26:00 220
摘要:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" type="text/css" href="layui/css/layui.css">

<script src="layui/layui.js"></script>

<title>管理员页面</title>

<style type="text/css">

.header span{

background: #009688;

color: #fff;

padding: 10px;

margin-left: 30px;

line-height: 34px;

}

.header button{

float: right;

background: #009688;

color: #fff;

}

.header{

border-bottom: 2px solid #009688;

}

</style>

</head>

<body style="padding:10px;">

<div class="header">

<span>中国功夫明星统计</span>

<button class="layui-btn layui-btn-primary layui-btn-sm">添加</button>

</div>

<table class="layui-table">

<thead>

<tr>

<th>ID</th>

<th>网名</th>

<th>真实姓名</th>

<th>角色</th>

<th>状态</th>

<th>添加时间</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<tr>

<th>1</th>

<th>哈喽</th>

<th>李小龙</th>

<th>主演</th>

<th>在线</th>

<th>2018-10-22</th>

<th>

<button class="layui-btn layui-btn-sm">编辑</button>

<button class="layui-btn layui-btn-sm"  onclick="del()">删除</button>

</th>

</tr>

<tr>

<th>2</th>

<th>枫叶</th>

<th>成龙</th>

<th>主演</th>

<th>在线</th>

<th>2018-10-22</th>

<th>

<button class="layui-btn layui-btn-sm">编辑</button>

<button class="layui-btn layui-btn-sm"  onclick="del()">删除</button>

</th>

</tr>

<tr>

<th>3/th>

<th>健康</th>

<th>赵文卓</th>

<th>主演</th>

<th>退役</th>

<th>2018-10-22</th>

<th>

<button class="layui-btn layui-btn-sm" >编辑</button>

<button class="layui-btn layui-btn-sm" onclick="del()">删除</button>

</th>

</tr>

</tbody>

</table>

<script>

layui.use(['element', 'layer'], function(){

var element = layui.element;

var layer = layui.layer;

});

function del(){

layer.confirm('确定要删除吗?', {

icon:2,

btn: ['确定', '取消'] //可以无限个按钮

,btn2: function(index, layero){

//按钮【按钮二】的回调

},

btn1: function(index, layero){

//按钮【按钮一】的回调

}

})

}

</script>

</body>

</html>


批改老师:韦小宝批改时间:2019-02-13 09:22:38
老师总结:很漂亮 layui来完成表格很简单 只需要使用layui中样式就可以轻松搞定 并且样式还简洁美观 当然layui中的表格样式也分多种 没事可以去研究研究

发布手记

热门词条