layui创建表格通过dom append,方式像表格里面添加一个新增按钮
时间: 2024-05-11 14:16:26 浏览: 80
可以通过以下代码实现:
```javascript
// 创建表格
var table = layui.table;
table.render({
elem: '#demo',
cols: [[
{field:'id', title:'ID', width:80},
{field:'username', title:'用户名', width:120},
{fixed: 'right', title:'操作', toolbar:'#barDemo', width:150} // 添加操作列
]],
data: [{
id: 1,
username: 'test'
}, {
id: 2,
username: 'demo'
}]
});
// 添加操作列和新增按钮
var $ = layui.$; // 引入 jQuery
var addBtn = '<button class="layui-btn layui-btn-xs" lay-event="add">新增</button>'; // 定义新增按钮
$('.layui-table-header tr').append('<th>操作</th>'); // 添加操作列
$('.layui-table-body tbody tr').each(function(){ // 给每行添加新增按钮
$(this).append('<td>' + addBtn + '</td>');
});
// 监听新增按钮点击事件
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'add'){ // 新增按钮
console.log('点击了新增按钮');
}
});
```
其中,`#demo` 是你要插入表格的 DOM 元素的 ID,`table.render` 方法用来创建表格。
在表格中添加操作列并添加新增按钮使用了 jQuery 操作 DOM 的方法。监听新增按钮的点击事件使用了 layui 的 `table.on` 方法。
阅读全文