微信小程序动态增加表格行
时间: 2023-09-19 16:08:24 浏览: 297
小程序源码 动态添加表格行.rar
要在微信小程序中动态增加表格行,可以通过以下步骤实现:
1. 在 wxml 文件中,定义一个表格组件,如下所示:
```
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr wx:for="{{tableData}}" wx:key="index">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
```
在表格中,使用 wx:for 属性和数据绑定,将表格行绑定到 tableData 数组中的每个元素上。
2. 在 js 文件中,定义一个初始的 tableData 数组,以及一个用于添加新行的函数,如下所示:
```
Page({
data: {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
},
addRow: function () {
var newData = { name: '赵六', age: 24 };
var tableData = this.data.tableData;
tableData.push(newData);
this.setData({ tableData: tableData });
}
})
```
在 addRow 函数中,创建一个新的行数据对象 newData,将其添加到 tableData 数组中,然后使用 setData 函数更新表格数据。
3. 在 wxml 文件中,添加一个按钮,用于触发添加新行的函数,如下所示:
```
<button bindtap="addRow">添加行</button>
```
在按钮上使用 bindtap 属性绑定 addRow 函数。
这样,当用户点击添加行按钮时,就会动态地向表格中添加一行数据。
阅读全文