layui写一个修改表格的功能
时间: 2024-03-25 10:41:11 浏览: 13
好的,下面是一个简单的 layui 修改表格的示例代码:
HTML 代码:
```html
<table class="layui-table" id="userTable">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>20</td>
<td>男</td>
<td><button class="layui-btn layui-btn-sm layui-btn-normal edit" data-id="1">编辑</button></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>25</td>
<td>女</td>
<td><button class="layui-btn layui-btn-sm layui-btn-normal edit" data-id="2">编辑</button></td>
</tr>
</tbody>
</table>
```
JavaScript 代码:
```javascript
// 监听编辑按钮的点击事件
$('#userTable').on('click', '.edit', function () {
var id = $(this).data('id');
var tr = $(this).parents('tr');
// 弹出编辑表单
layer.open({
type: 1,
title: '编辑用户信息',
area: '400px',
content: $('#editForm'),
success: function (layero, index) {
// 将当前行的数据填充到表单中
$('#id').val(id);
$('#username').val(tr.find('td:eq(1)').text());
$('#age').val(tr.find('td:eq(2)').text());
$('#gender').val(tr.find('td:eq(3)').text());
}
});
});
// 监听表单的提交事件
form.on('submit(editForm)', function (data) {
var id = data.field.id;
var username = data.field.username;
var age = data.field.age;
var gender = data.field.gender;
// TODO: 发送 AJAX 请求修改数据
// 修改成功后更新表格中的数据
var tr = $('#userTable').find('tr[data-id=' + id + ']');
tr.find('td:eq(1)').text(username);
tr.find('td:eq(2)').text(age);
tr.find('td:eq(3)').text(gender);
// 关闭弹窗
layer.closeAll();
return false;
});
```
其中,`#editForm` 是一个隐藏的表单,用于编辑用户信息。具体的代码实现需要根据您的实际需求进行修改。