layui-table布局作业
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui-table布局作业</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201811010202" />
<style>
.table-title {
text-align: center;
}
.table-title button {
width: 300px;
height: 45px;
margin: 8px;
border-radius: 8px;
box-shadow: 1px 1px 12px #747171;
}
</style>
</head>
<body>
<div class="table-title">
<button class="layui-btn layui-btn-normal">中国武术界明星统计信息表</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>
<td>1</td>
<td>李小龙</td>
<td>男</td>
<td>中国</td>
<td>Mr Li</td>
<td>999</td>
<td><button class="layui-btn layui-btn-xs">编辑</button><button
class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>成龙</td>
<td>男</td>
<td>中国</td>
<td>Jacky Chen</td>
<td>998</td>
<td><button class="layui-btn layui-btn-xs">编辑</button><button
class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button></td>
</tr>
<tr>
<td>3</td>
<td>杨祡琼</td>
<td>女</td>
<td>中国</td>
<td>Miss Yang </td>
<td>888</td>
<td><button class="layui-btn layui-btn-xs">编辑</button><button
class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button></td>
</tr>
<tr>
<td>4</td>
<td>李连杰</td>
<td>男</td>
<td>中国</td>
<td>Mr Li</td>
<td>888</td>
<td>
<button class="layui-btn layui-btn-xs">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button></td>
</tr>
</tbody>
</table>
<script src="//layui.hcwl520.com.cn/layui/layui.js?v=201811010202"></script>
<script>
layui.use('layer', function () {
var element = layui.element;
var layer = layui.layer;
});
function del(){
layer.confirm('are you sure to delete?', {
icon: 2,
title:'请慎重操作',
btn: ['ok', 'cancel']
});
}
</script>
</body>
</html>