添加一个新增按钮,位于layui表格的倒数第一行(前面包含一个所以值),
时间: 2024-05-11 11:16:53 浏览: 17
好的,您想要在Layui表格中添加一个新增按钮,位于表格的倒数第一行,前面包含一个总计值。正确吗?我可以为您提供一些代码,您可以参考一下:
```javascript
layui.use(['table'], function() {
var table = layui.table;
//定义表格数据
var data = [{
name: '张三',
age: 18,
sex: '男'
}, {
name: '李四',
age: 20,
sex: '男'
}, {
name: '王五',
age: 22,
sex: '女'
}];
//渲染表格
table.render({
elem: '#demo',
data: data,
cols: [
[{
field: 'name',
title: '姓名',
width: '30%',
align: 'center'
}, {
field: 'age',
title: '年龄',
width: '30%',
align: 'center'
}, {
field: 'sex',
title: '性别',
width: '30%',
align: 'center'
}]
],
//添加一个坐标为[#data.length,0]的单元格,用来显示总计值
done: function(res, curr, count) {
$('tbody').append('<tr><td>总计</td><td>' + count + '</td><td></td></tr>');
}
});
//添加新增按钮到表格最后一行
$(".layui-table-main").on("click", "tr:last td .layui-btn", function() {
//处理新增按钮点击事件
});
});
```
这段代码会将一个新增按钮添加到表格的最后一行。您可以在点击新增按钮时处理对应的事件。希望对您有所帮助。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)