layui实现点击按钮添加一行的方法
在网页设计及开发中，经常需要向表格或表单中添加数据行。这个过程需要使用JavaScript来实现。可是，对于不太熟悉JavaScript的开发者，实现这个过程可能有一定的难度。所以，我们可以使用LayUI这个前端框架来实现添加一行的功能。
什么是LayUI
LayUI是一款基于HTML5的前端UI框架，是由花裤衩开发的。这个框架集成了丰富的页面组件和丰富的常用la的样式。可以让页面的开发过程变得简单而轻松。
添加一行的方法
我们使用LayUI可以在HTML中定义一个表格。另外，我们还需要添加一些JavaScript代码来实现在表格中添加数据行的功能。下面是LayUI添加一行的示例代码：
<head>
<html>
<style>
.layui-form-label {
width: 110px;
}
.item-list td {
border-top: 1px solid #e6e6e6;
}
</style>
</head>
<body style="padding: 20px;">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" id="addLine">添加一行
</div>
<table class="layui-table" lay-data="{height: 315, url: '', page: true, method: 'GET'}"
lay-filter="demo">
<thead>
<tr>
<th lay-data="{field:'id', width:80}">ID</th>
<th lay-data="{field:'name'}">姓名</th>
<th lay-data="{field:'job'}">工作</th>
<th lay-data="{field:'salary', width:135}">工资</th>
<th lay-data="{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}"></th>
</tr>
</thead>
<body class="item-list">
</body>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.js">
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use(['form', 'table'], function () {
var form = layui.form,
table = layui.table,
$ = layui.$;
var count = 1;
$('#addLine').click(function () {
addLine()
})
function addLine() {
var str = '';
str += '<tr>';
str += '<td>' + (count++) + '</td>';
str += '<td></td>';
str += '<td></td>';
str += '<td></td>';
str += '<td></div>';
str += '</tr>';
$('.item-list').append(str)
}
})
</script>
</body>
在HTML代码中，我们定义了一个表格。表格中包含头部信息（即表头）和身体信息（即表格中的数据行）。
我们使用LayUI的表格组件来定义表格。可以看到，在示例代码中，我们将表格的数据在服务器上分页展现。这句话代表着我们的表格数据来自于后端服务器。我们还定义了表头，指定了每个数据行要显示的字段名称及长度等信息。
示例代码中还包含一个按钮，用于添加一行。我们使用了LayUI的按钮组件来定义这个按钮。当按钮被点击时，调用JS函数addLine()来添加一行数据。
在JS代码中，我们定义了addLine()函数，用于添加一行数据。在函数中，我们首先定义了一些字符串变量，用于生成一行数据的HTML代码。我们使用jQuery的append()函数将生成的HTML代码添加到表格的BODY部分中。这样，就完成了在表格中添加一行数据的功能。
总结
在使用LayUI开发页面时，我们可以方便地使用LayUI的表格组件来实现在表格中添加数据行的功能。LayUI还提供了很多其他的页面组件，如分页组件、弹出层组件等。这些组件可以让我们的页面看起来更加美观并且易于交互。