本文最后更新于13 天前，其中的信息可能已经过时，如有错误请发送邮件到kirasu@qq.com
Layui 练习题参考答案
全部html页面放在templates，可配合Thymeleaf直接运行
题目1 参考答案
<!DOCTYPE html>
<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<head>
<meta charset="UTF-8">
<title>题目1</title>
<link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css)">
</head>
<body>
<button class="layui-btn" id="btn">点击提示</button>
<script src="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js)"></script>
<script>
layui.use(function(){
var layer = layui.layer;
document.getElementById('btn').onclick = function(){
layer.msg('欢迎学习Layui');
}
})
</script>
</body>
</html>题目2 参考答案
<!DOCTYPE html>
<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<head>
<meta charset="UTF-8">
<title>题目2</title>
<link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css)">
</head>
<body>
<div class="layui-row">
<div class="layui-col-md4">左侧内容</div>
<div class="layui-col-md8">右侧内容</div>
</div>
<script src="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js)"></script>
</body>
</html>题目3 参考答案
<!DOCTYPE html>
<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<head>
<meta charset="UTF-8">
<title>题目3</title>
<link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css)">
</head>
<body>
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="myform">提交</button>
</div>
</div>
</form>
<script src="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js)"></script>
<script>
layui.use(function(){
var form = layui.form;
var layer = layui.layer;
form.on('submit(myform)', function(data){
layer.msg("你输入的用户名：" + data.field.username);
return false;
});
})
</script>
</body>
</html>题目4 参考答案
<!DOCTYPE html>
<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<head>
<meta charset="UTF-8">
<title>题目4</title>
<link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css)">
</head>
<body>
<input type="text" id="date" class="layui-input">
<script src="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js)"></script>
<script>
layui.use(function(){
var laydate = layui.laydate;
laydate.render({
elem: '#date'
});
})
</script>
</body>
</html>题目5 参考答案
<!DOCTYPE html>
<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<head>
<meta charset="UTF-8">
<title>题目5</title>
<link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css)">
</head>
<body>
<table class="layui-table">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>22</td>
</tr>
</tbody>
</table>
<script src="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js)"></script>
</body>
</html>题目6 参考答案
<!DOCTYPE html>
<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<head>
<meta charset="UTF-8">
<title>题目6</title>
<link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css)">
</head>
<body>
<div class="layui-card">
<div class="layui-card-header">用户信息卡片</div>
<div class="layui-card-body">这是layui卡片组件示例</div>
</div>
<script src="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js)"></script>
</body>
</html>题目7 参考答案
<!DOCTYPE html>
<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<head>
<meta charset="UTF-8">
<title>题目7</title>
<link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css)">
</head>
<body>
<button class="layui-btn layui-btn-danger" id="delBtn">删除</button>
<script src="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js)"></script>
<script>
layui.use(function(){
var layer = layui.layer;
document.getElementById("delBtn").onclick = function(){
layer.confirm('确定删除这条数据吗？',function(index){
layer.msg("删除成功");
layer.close(index);
})
}
})
</script>
</body>
</html>题目8 参考答案
<!DOCTYPE html>
<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<head>
<meta charset="UTF-8">
<title>题目8</title>
<link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css)">
</head>
<body>
<div id="page"></div>
<script src="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js)"></script>
<script>
layui.use(function(){
var laypage = layui.laypage;
laypage.render({
elem:'page',
count:120,
limit:10,
curr:1
})
})
</script>
</body>
</html>题目9 参考答案
<!DOCTYPE html>
<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<head>
<meta charset="UTF-8">
<title>题目9</title>
<link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css)">
</head>
<body>
<table id="goodsTable"></table>
<script src="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js)"></script>
<script>
layui.use(function(){
var table = layui.table;
table.render({
elem:'#goodsTable',
cols:[[
{field:'id',title:'商品id'},
{field:'name',title:'商品名称'},
{field:'price',title:'价格'}
]],
data:[
{id:1,name:"手机",price:3999},
{id:2,name:"电脑",price:5999}
]
})
})
</script>
</body>
</html>题目10 参考答案
<!DOCTYPE html>
<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<head>
<meta charset="UTF-8">
<title>题目10</title>
<link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/css/layui.css)">
</head>
<body>
<div class="layui-card">
<div class="layui-card-header">新增用户</div>
<div class="layui-card-body">
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">年龄</label>
<div class="layui-input-block">
<input type="text" name="age" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="addUser">提交</button>
</div>
</div>
</form>
</div>
</div>
<script src="[https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js](https://cdn.jsdelivr.net/npm/layui-src@2.9.6/dist/layui.js)"></script>
<script>
layui.use(function(){
var form = layui.form;
var layer = layui.layer;
form.on('submit(addUser)', function(data){
layer.confirm("确认提交新增用户？",function(index){
layer.msg("新增成功");
layer.close(index);
})
return false;
})
})
</script>
</body>
</html>