小程序版的数据删除、修改操作

test.wxml

<view class="container">
	<block wx:for="{{stu}}" wx:key="{{id}}">
		<text>姓名：{{item.name}}</text>
		<text>年龄：{{item.age}}</text>
		<text bindtap="delStu" data-id="{{item.id}}">删除</text>
		<text bindtap="editStu" data-id="{{item.id}}">修改</text>
	</block>
	<view id="editkuang" hidden="{{ek}}">
		姓名：<input type="text" model:value="{{editName}}" />
		年龄：<input type="text" model:value="{{editAge}}" />
		<button id="qd" bindtap="qd">确定</button>
		<button id="qx" bindtap="qx">取消</button>
	</view>
</view>

test.wxss

#editkuang {
	width: 600rpx;
	height: 400rpx;
}
#editkuang>input{
	height: 50rpx;
	border: 1rpx solid black;
}

test.js

// index.js
// 获取应用实例
const app = getApp()

Page({
	// 相当于存放变量的
	data: {
		ek: true,
		eName: '',
		stu: [{
				id: 1,
				name: '张三',
				age: 17
			},
			{
				id: 2,
				name: '李四',
				age: 19
			},
			{
				id: 3,
				name: '王五',
				age: 18
			},
			{
				id: 4,
				name: '刘二',
				age: 20
			}
		]
	},
	// 删除
	delStu(event) {
		let newData = this.data.stu
		for (let i = 0; i < this.data.stu.length; i++) {
			if (this.data.stu[i].id == event.target.dataset.id) {
				newData.splice(i, 1)
			}
		}
		this.setData({
			stu: newData
		})
  },
  // 修改
	editStu(event) {
		this.setData({
			ek: false
		})
		let newData = this.data.stu
		for (let i = 0; i < this.data.stu.length; i++) {
			if (this.data.stu[i].id == event.target.dataset.id) {
				this.setData({
					editId: event.target.dataset.id
				}),
				this.setData({
					editName: this.data.stu[i].name
				}),
				this.setData({
					editAge: this.data.stu[i].age
				})
			}
		}
		this.setData({
			stu: newData
		})
	},
	// 确定
	qd: function (event) {
		let newData = this.data.stu
		let eName = this.data.editName
		let eAge = this.data.editAge
		let editId = this.data.editId
		console.log(eName);
		for (let i = 0; i < this.data.stu.length; i++) {
			if (this.data.stu[i].id == editId) {
				this.data.stu[i].name = eName
				this.data.stu[i].age = eAge
			}
		}
		this.setData({
			stu: newData
		})
		this.setData({
			ek: true
		})
	},
	// 取消
	qx:function(event){
		this.setData({
			ek: true
		})
	},
})