layui动态添加行
时间: 2023-06-29 07:13:46 浏览: 55
要动态添加行,可以使用layui的表格组件。具体实现步骤如下:
1. 获取表格对象和表格数据。
```javascript
var table = layui.table;
var data = [{
id: 1,
name: '张三',
age: 18
}, {
id: 2,
name: '李四',
age: 20
}];
```
2. 渲染表格。
```javascript
table.render({
elem: '#demo',
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'}
]],
data: data
});
```
3. 添加行。
```javascript
// 添加一行数据
var newRow = {
id: 3,
name: '王五',
age: 22
};
data.push(newRow);
table.reload('demo', {data: data});
```
4. 删除行。
```javascript
// 删除第一行数据
data.splice(0, 1);
table.reload('demo', {data: data});
```
注意:要使用`table.reload`方法刷新表格数据。`table.reload`方法的第一个参数是表格的id,第二个参数是表格的配置项,其中`data`是表格的数据。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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_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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)