var 定义data数组,数组里面定义数据,通过clos的方式将数据渲染到layui表格上,表格倒数第一行第二列有一个新增按钮
时间: 2024-05-07 13:16:40 浏览: 106
,如何实现点击按钮后在表格中新增一行数据?
首先,需要在页面中定义一个空行的 HTML 模板,用于插入新行。然后,可以通过监听新增按钮的点击事件,在表格的数据数组中新增一条数据,再通过 layui 表格的 API 调用相应方法将新行插入到表格中。具体实现代码如下:
```javascript
// 定义空行 HTML 模板
var tpl = '<tr>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td><a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a></td>' +
'</tr>';
// 监听新增按钮的点击事件
$('.add-btn').click(function() {
// 在数据数组中新增一条数据
data.push({});
// 将空行 HTML 模板插入到表格倒数第二行(新增按钮所在的行)的下面
$('#table>tbody>tr:nth-last-child(2)').after(tpl);
// 重新渲染表格
table.reload('table');
});
```
其中,`$('.add-btn')` 是新增按钮的 jQuery 选择器,`data` 是定义的数据数组,`$('#table')` 是 layui 表格的 jQuery 选择器,`table` 是 layui 表格的实例对象。注意,需要将 `table` 的 ID 设置为 `table`。
阅读全文