中国功夫明星统计表格

原创 2019-02-16 19:10:09 292
摘要:<!DOCTYPE html><html><head><meta charset="utf-8"><title>中国功夫明星统计表格</title><link rel="stylesheet" type="text/css" href="../layu

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>中国功夫明星统计表格</title>

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

   <script type="text/javascript" src="../layui/layui.js"></script>

   <style type="text/css">

.head span{background: #098;color: white;padding: 10px;margin-left: 30px;}

.head button{float: right;}

.head{height: 28px;border-bottom: 2px solid #098;}

</style>

</head>

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

<div class="head">

<span>管理员列表</span>

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

</div>

<table class="layui-table">

<thead>

<tr>

<th>姓名</th>

<th>性别</th>

<th>民族</th>

<th>生日</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<tr>

<td>李连杰</td>

<td>男</td>

<td>汉族</td>

<td>1963-04-26</td>

<td>

<div class="layui-btn-group">

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

</div>

</td>

</tr>

<tr>

<td>成龙</td>

<td>男</td>

<td>汉族</td>

<td>1954-04-07</td>

<td>

<div class="layui-btn-group">

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

</div>

</td>

</tr>

<tr>

<td>吴京</td>

<td>男</td>

<td>汉族</td>

<td>1974-04-03</td>

<td>

<div class="layui-btn-group">

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

</div>

</td>

</tr>

<tr>

<td>甄子丹</td>

<td>男</td>

<td>汉族</td>

<td>1963-07-27</td>

<td>

<div class="layui-btn-group">

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

</div>

</td>

</tr>

<tr>

<td>叶问</td>

<td>男</td>

<td>汉族</td>

<td>1893-10-01</td>

<td>

<div class="layui-btn-group">

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

</div>

</td>

</tr>

</tbody>

</table>

   <script>

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

var element = layui.element;

var layer = layui.layer;

});

function del() {

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

icon:3,

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

}, function(index, layero) {

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

}, function(index){

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

})

}

</script>

</body>


</html>

批改老师:西门大官人批改时间:2019-02-17 09:08:59
老师总结:作业写的不错,layui还有其他样式的表格,如:没有边框的、有背景色的等等,有兴趣的话可以尝试下

发布手记

热门词条