layui框架完成统计表格

abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="layui/css/l

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<script type="text/javascript" src="layui/layui.js" ></script>
	</head>
	<style>
		body{padding: 10px;}
		.top{border-bottom: 2px solid #009688;line-height: 36px;}
		.top span{background: #009688;padding:10px;color: #FFFFFF;}
		.top button{float: right;}
	</style>
	<body>
		<div class="top">
			<span>明星列表</span>
			<button class="layui-btn layui-btn-sm">增加</button>
		</div>
		<div>
			<table class="layui-table">
		    <thead>
		      <tr>
		      	<th>ID</th>
		        <th>姓名</th>
		        <th>性别</th>
		        <th>所在地区</th>
		        <th>出生日期</th>
		        <th>操作</th>
		      </tr> 
		    </thead>
		    <tbody>
		      <tr>
		      	<th>001</th>
		        <td>李小龙</td>
		        <td>男</td>
		        <td>中国</td>
		        <td>1940-11-27</td>
		        <td>
		        	<a class="layui-btn layui-btn-xs" lay-event="edit" id="edit">编辑</a>
 					<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" onclick="del()">删除</a>
		        </td>
		      </tr>
		      <tr>
		      	<th>002</th>
		        <td>李连杰</td>
		        <td>男</td>
		        <td>中国</td>
		        <td>1940-11-27</td>
		         <td>
		        	<a class="layui-btn layui-btn-xs" lay-event="edit" id="edit">编辑</a>
 					<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" onclick="del()">删除</a>
		        </td>
		      </tr>
		      <tr>
		      	<th>003</th>
		        <td>甄子丹</td>
		        <td>男</td>
		        <td>中国</td>
		        <td>1940-11-27</td>
		         <td>
		        	<a class="layui-btn layui-btn-xs" lay-event="edit" id="edit">编辑</a>
 					<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" onclick="del()">删除</a>
		        </td>
		      </tr>
		    </tbody>
		 </table>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<script>
			
			layui.use(['element', 'layer'], function(){
			  var element = layui.element;
			  var layer = layui.layer;
			});
			
			//弹出层
			function del(){
				layer.confirm('确认删除吗？', {
				icon:2,
				btn: ['确认', '取消',] //可以无限个按钮
					}, function(index, layero){
					  //按钮【按钮一】的回调
					}, function(index){
					  //按钮【按钮二】的回调
					});
			}
			//编辑
			$('#edit').click(function(){
				$(this).parent('td').siblings().attr('contenteditable','true')
			})
	</script>
</html>

Correcting teacher：韦小宝Correction time：2018-12-29 15:57:55
Teacher's summary：使用layui来完成表格那就是太简单了！但是课后还是得练习哦！

layui框架完成统计表格

Popular Entries