亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

layui框架完成統(tǒng)計表格

??? 2018-12-29 15:43:49 714
????:<!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>所在地區(qū)</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){
					  //按鈕【按鈕一】的回調(diào)
					}, function(index){
					  //按鈕【按鈕二】的回調(diào)
					});
			}
			//編輯
			$('#edit').click(function(){
				$(this).parent('td').siblings().attr('contenteditable','true')
			})
	</script>
</html>


?? ???:韋小寶?? ??:2018-12-29 15:57:55
???? ??:使用layui來完成表格那就是太簡單了!但是課后還是得練習哦!

??? ??

?? ??