adimin管理页面

原创 2019-01-30 13:55:09 805
摘要:<!DOCTYPE html><html>   <head>      <meta charset="utf-8">      <title>管理员列表</title>          

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <title>管理员列表</title>
           <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
     <script src="static/plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
     <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
     <style type="text/css">
        body{padding:10px;}
        /* 头部 */
        .header{border-bottom: 2px solid #009688;color:#fff;font-size:14px;box-sizing: border-box;}
           .header span {padding:10px;background: #009688;margin-left:30px;line-height: 32px;}
           .header button {float:right;}
        /* 内容 */
     </style>
  </head>
  <body>
<div class="header">
  <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>
           <th>操作</th>
        </tr>
     </thead>
     <!--身体-->
     <tbody>
        <tr>
           <td>成龙</td>
           <td>男</td>
           <td>香港</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(this)">删除</button>
           </td>
        </tr>
        <tr>
           <td>甄子丹</td>
           <td>男</td>
           <td>香港</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(this)">删除</button>
           </td>
        </tr>
        <tr>
           <td>李连杰</td>
           <td>男</td>
           <td>香港</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(this)">删除</button>
           </td>
        </tr>
        <tr>
           <td>卓文卓</td>
           <td>男</td>
           <td>香港</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(this)">删除</button>
           </td>
        </tr>
        <tr>
           <td>李小龙</td>
           <td>男</td>
           <td>香港</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(this)">删除</button>
           </td>
        </tr>
     </tbody>
  </table>
  </body>
  <script>
     //加载模板
     layui.use(['layer'],function(){
         layer = layui.layer;
         $ = layui.jquery;
     });

       /**
      * 删除当前
        * @param self
        */
     function del(self){
         $(self).parent().parent().remove();
     }

  </script>

</html>

批改老师:韦小宝批改时间:2019-01-31 09:11:37
老师总结:写的很不错 使用layui来搭建列表速度不仅仅快而且还简洁美观 layui的功能还有很多 没事可以把手册好好看看

发布手记

热门词条