サマリー：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商品管理</title> <link rel="stylesheet" href="layui/css/layu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品管理</title>
<link rel="stylesheet" href="layui/css/layui.css">
<style>
.header{border-bottom: 2px lightblue solid;}
.header span{color: #fff;background:lightblue;padding:8px;line-height: 32px;margin-left: 30px;font-size: 16px;}
.header button{float:right;}
</style>
</head>
<body>
<div>
<span>商品列表</span>
<button class="layui-btn layui-btn-sm" onclick="add()">添加</button>
</div>
<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>hello</th>
<th>20</th>
<th>
<button class="layui-btn layui-btn-sm">編輯</button>
<button class="layui-btn layui-btn-sm">刪除</button>
</th>
</tr>
<tr>
<th>2</th>
<th>張三</th>
<th>男</th>
<th>石家莊</th>
<th>hello</th>
<th>20</th>
<th>
<button class="layui-btn layui-btn-sm">編輯</button>
<button class="layui-btn layui-btn-sm">刪除</button>
</th>
</tr>
<tr>
<th>3</th>
<th>張三</th>
<th>男</th>
<th>石家莊</th>
<th>hello</th>
<th>20</th>
<th>
<button class="layui-btn layui-btn-sm">編輯</button>
<button class="layui-btn layui-btn-sm">刪除</button>
</th>
</tr>
<tr>
<th>4</th>
<th>張三</th>
<th>男</th>
<th>石家莊</th>
<th>hello</th>
<th>20</th>
<th>
<button class="layui-btn layui-btn-sm">編輯</button>
<button class="layui-btn layui-btn-sm">刪除</button>
</th>
</tr>
</tbody>
</table>
</body>
<script src="statics/js/jq_3.3.1_mi.js"></script>
<script src="layui/layui.all.js"></script>
<script>
function add(){
layer.open({
content: '添加商品',
success: function(layero, index){
console.log(layero, index);
}
});
}
</script>
</html>代碼執(zhí)行后顯示結(jié)果如下：
添削の先生：韋小寶添削時(shí)間：2019-03-09 16:27:23
先生のまとめ：寫的很不錯(cuò) layui中的彈出層和表格樣式都是挺多的 使用起來也很靈活 沒事的時(shí)候多去研究研究