abstract：<!DOCTYPE html><html><head><meta charset="utf-8"><title>layui-table布局作業(yè)</title><meta name="renderer" content="webkit"><meta h
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui-table布局作業(yè)</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">中國武術(shù)界明星統(tǒng)計信息表</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>
Correcting teacher：韋小寶Correction time：2019-03-11 08:57:06
Teacher's summary：寫的很不錯 使用layui來完成頁面的布局就太簡單了 layui中的表格有很多種樣式 使用起來也很靈活 沒事多去練習(xí)練習(xí)