好的，针对您的问题，需要使用
Layui的
弹出层组件，在表格中添加一个按钮，并且绑定点击事件，在点击事件中创建
弹出层并且显示。以下是示例代码：
HTML代码：
```html
<table id="table" lay-filter="table">
<!-- 表格内容 -->
<td><button class="
layui-btn
layui-btn-sm" lay-event="edit">编辑</button></td>
<!-- 按钮 -->
</table>
```
JavaScript代码：
```javascript
layui.use(['table', 'layer'], function() {
var table =
layui.table;
var layer =
layui.layer;
// 监听表格中按钮的点击事件
table.on('tool(table)', function(obj) {
if (obj.event === 'edit') {
//
弹出层内容
var html = '<form class="
layui-form">';
html += '<div class="
layui-form-item">';
html += '<label class="
layui-form-label">姓名</label>';
html += '<div class="
layui-input-block">';
html += '<input type="text" name="name" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="
layui-input">';
html += '</div>';
html += '</div>';
html += '<div class="
layui-form-item">';
html += '<label class="
layui-form-label">年龄</label>';
html += '<div class="
layui-input-block">';
html += '<input type="text" name="age" lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="
layui-input">';
html += '</div>';
html += '</div>';
html += '<div class="
layui-form-item">';
html += '<div class="
layui-input-block">';
html += '<button class="
layui-btn" lay-filter="submit" lay-submit>提交</button>';
html += '</div>';
html += '</div>';
html += '</form>';
//
弹出层
layer.open({
title: '编辑信息',
area: ['500px', '300px'],
content: html
});
// 监听提交事件
form.on('submit(submit)', function(data) {
// 模拟Ajax提交表单
layer.
msg(JSON.stringify(data.field));
return false;
});
}
});
});
```
您可以根据具体需求修改
弹出层的内容以及样式。另外，也可以在
弹出层中使用模板引擎来生成内容。
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
