layui框架完成中国功夫明星统计表格

原创 2018-12-26 21:43:40 199
摘要:<!DOCTYPE html> <html> <head>          <meta charset="utf-8">         &
<!DOCTYPE html>
<html>
<head>
         <meta charset="utf-8">
         <title>功夫明星统计表格</title>
         <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
         <script type="text/javascript" src="static/layui/layui.js"></script>
         <style type="text/css">
                  .header{border-bottom: 2px solid #009688;line-height: 32px;}
                  .header span{padding: 10px;background: #009688;color: #fff;margin-left:30px;}
                  .header button{float: right;}
         </style>
</head>
<body style="padding: 5px;">
<div>
         <span>明星列表</span>
         <button class="layui-btn layui-btn-sm">添加</button>
</div>
<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>56</td>
        <td>汉</td>
        <td>天蝎座</td>
        <td>
                <a class="layui-btn layui-btn-xs" >编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</a>
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>李小龙</td>
        <td>男</td>
        <td>56</td>
        <td>汉</td>
        <td>天蝎座</td>
        <td>
                <a class="layui-btn layui-btn-xs" >编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</a>
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>李连杰</td>
        <td>男</td>
        <td>56</td>
        <td>汉</td>
        <td>天蝎座</td>
        <td>
                <a class="layui-btn layui-btn-xs" >编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</a>
        </td>
      </tr>
      <tr>
        <td>4</td>
        <td>甄子丹</td>
        <td>男</td>
        <td>56</td>
        <td>汉</td>
        <td>天蝎座</td>
        <td>
                <a class="layui-btn layui-btn-xs" >编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</a>
        </td>
      </tr>
      <tr>
        <td>5</td>
        <td>吴京</td>
        <td>男</td>
        <td>56</td>
        <td>汉</td>
        <td>天蝎座</td>
        <td>
                <a class="layui-btn layui-btn-xs" >编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</a>
        </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>

后台3.png

批改老师:灭绝师太批改时间:2018-12-27 09:45:18
老师总结:完成的不错呦!继续加油!layui比较容易上手要尽快熟悉他的组件!

发布手记

热门词条