使用layui统计明星

原创 2018-12-29 10:55:34 304
摘要:<!DOCTYPE html><html><head> <title>管理员列表</title> <link rel="stylesheet" type="text/css" href="layui/css/layui.css"> <script type=&

<!DOCTYPE html>

<html>

<head>

<title>管理员列表</title>

<link rel="stylesheet" type="text/css" href="layui/css/layui.css">

<script type="text/javascript" src="layui/layui.js"></script>

<style type="text/css">

.header span{background:#009688;color: #fff;padding: 10px;margin-left: 30px;line-height: 36px; }

.header button{float: right;}

.header{border-bottom: 2px #009688 solid;}

</style>

</head>

<body>

<div class="header">

<span>管理员列表</span>

<button class="layui-btn layui-bt-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>1</td>

      <td>成龙</td>

      <td>男</td>

      <td>2016-11-28</td>

      <td>人生就像是一场修行 A</td>

      <td>900</td>

      <td>

           <button class="layui-btn layui-btn-xs ">编辑</button>

    <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del()">删除</button>

      </td>

    </tr>

    <tr>

    <td>1</td>

      <td>李连杰</td>

      <td>男</td>

      <td>2016-11-29</td>

      <td>人生就像是一场修行 B</td>

      <td>900</td>

      <td>

           <button class="layui-btn layui-btn-xs ">编辑</button>

    <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del()">删除</button>

      </td>

    </tr>

    <tr>

    <td>1</td>

      <td>某某明星</td>

      <td>男</td>

      <td>2016-11-30</td>

      <td>人生就像是一场修行 C</td>

      <td>900</td>

      <td>

           <button class="layui-btn layui-btn-xs ">编辑</button>

    <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del()">删除</button>

      </td>

    </tr>

  </tbody>

</table>

</table>


<script type="text/javascript">

layui.use(['layer'], function(){

  var element = layui.element;

  var layer = layui.layer;

});

  // 退出框

// 如果不引用layer则会提示Uncaught ReferenceError: layer is not defined

  function del(){


  layer.confirm('确定删除', {

  icon:2, //2是X,3是? 一共1--6

  btn: ['退出', '取消'] //可以无限个按钮

  }, function(index, layero){

  //按钮【按钮一】的回调

}, function(index){

  //按钮【按钮二】的回调

});

  }

</script>

</body>

</html>


批改老师:天蓬老师批改时间:2018-12-29 11:23:22
老师总结:layui中封装了很多的基本操作, 很方便,但有些还是用原生或者更方便,要对比着用

发布手记

热门词条