abstract:<!DOCTYPE html> <html> <head> <title>中国武打明星统计表</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css
<!DOCTYPE html> <html> <head> <title>中国武打明星统计表</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="../static/plugins/layui/css/layui.css"> <script type="text/javascript" src="../static/plugins/layui/layui.js"></script> <style type="text/css"> .header span { background: #009688; color: #ffffff; padding: 10px; margin-left: 30px; line-height: 32px; } .header button { float: right; } .header { border-bottom: 2px #009688 solid; } </style> </head> <body style="padding: 10px;"> <div class="header"> <span>管理员列表</span> <button class="layui-btn 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> <td>01</td> <td>李小龙</td> <td>男</td> <td>1940.11</td> <td>汉族</td> <td>《猛龙过江》、《精武门》、《唐山大兄》</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>02</td> <td>成龙</td> <td>男</td> <td>1954.04</td> <td>汉族</td> <td>《警察故事》、《醉拳》、《尖峰时刻》</td> <td> <button class="layui-btn layui-btn-xs">编辑</button> <button class="layui-btn layui-btn-danger layui-btn-xs">删除</button> </td> </tr> <tr> <td>03</td> <td>甄子丹</td> <td>男</td> <td>1963.07</td> <td>汉族</td> <td>《精武门》、《导火线》、《杀破狼》、《极限特工》</td> <td> <button class="layui-btn layui-btn-xs">编辑</button> <button class="layui-btn layui-btn-danger layui-btn-xs">删除</button> </td> </tr> <tr> <td>04</td> <td>杨紫琼</td> <td>女</td> <td>1962.08</td> <td>汉族</td> <td>《卧虎藏龙》、《剑雨》、《警察故事3超级警察》</td> <td> <button class="layui-btn layui-btn-xs">编辑</button> <button class="layui-btn layui-btn-danger layui-btn-xs">删除</button> </td> </tr> <tr> <td>05</td> <td>惠英红</td> <td>女</td> <td>1960.02</td> <td>汉族</td> <td>《武侠》、《倩女幽魂》《太极宗师》</td> <td> <button class="layui-btn layui-btn-xs">编辑</button> <button class="layui-btn layui-btn-danger layui-btn-xs">删除</button> </td> </tr> </tbody> </table> <script> layui.use(['layer'], function () { var element = layui.element; var layer = layui.layer; }); function del() { layer.confirm('确定要删除吗?', { icon: 2, btn: ['确定', '取消'] //可以无限个按钮 }, function (index, layero) { //按钮【按钮一】的回调 }, function (index) { //按钮【按钮二】的回调 }); } </script> </body> </html>
Correcting teacher:韦小宝Correction time:2019-01-11 13:13:26
Teacher's summary:写的很完整 很不错 layui中的表格还有很多样式和功能呢 有兴趣的话可以看看哦