用ts写一个from表单的增删改查
时间: 2023-10-06 15:13:08 浏览: 53
以下是一个使用 TypeScript 编写的基本的用户信息增删改查表单示例:
```typescript
interface User {
id: number;
name: string;
age: number;
}
// 获取表单元素
const form = document.querySelector('form')!;
const idInput = document.querySelector('#id')! as HTMLInputElement;
const nameInput = document.querySelector('#name')! as HTMLInputElement;
const ageInput = document.querySelector('#age')! as HTMLInputElement;
const submitBtn = document.querySelector('#submit')! as HTMLButtonElement;
const deleteBtn = document.querySelector('#delete')! as HTMLButtonElement;
const updateBtn = document.querySelector('#update')! as HTMLButtonElement;
const searchBtn = document.querySelector('#search')! as HTMLButtonElement;
// 定义用户列表和当前选中的用户
const userList: User[] = [];
let selectedUser: User | null = null;
// 绑定表单提交事件
form.addEventListener('submit', (event) => {
event.preventDefault();
const id = parseInt(idInput.value);
const name = nameInput.value.trim();
const age = parseInt(ageInput.value);
if (!id || !name || !age) {
alert('请填写完整信息!');
return;
}
if (selectedUser) {
// 更新用户信息
selectedUser.name = name;
selectedUser.age = age;
} else {
// 新增用户信息
const newUser: User = { id, name, age };
userList.push(newUser);
}
resetForm();
renderUserList(userList);
});
// 绑定删除按钮点击事件
deleteBtn.addEventListener('click', () => {
if (!selectedUser) {
alert('请先选择要删除的用户!');
return;
}
const index = userList.findIndex((user) => user.id === selectedUser!.id);
userList.splice(index, 1);
selectedUser = null;
resetForm();
renderUserList(userList);
});
// 绑定更新按钮点击事件
updateBtn.addEventListener('click', () => {
if (!selectedUser) {
alert('请先选择要更新的用户!');
return;
}
idInput.value = String(selectedUser.id);
nameInput.value = selectedUser.name;
ageInput.value = String(selectedUser.age);
});
// 绑定搜索按钮点击事件
searchBtn.addEventListener('click', () => {
const keyword = prompt('请输入要搜索的关键字:');
if (!keyword) {
return;
}
const searchResult = userList.filter((user) =>
[user.id, user.name, user.age].some((value) =>
String(value).toLowerCase().includes(keyword.toLowerCase())
)
);
renderUserList(searchResult);
});
// 重置表单
function resetForm() {
idInput.value = '';
nameInput.value = '';
ageInput.value = '';
selectedUser = null;
}
// 渲染用户列表
function renderUserList(userList: User[]) {
const tableBody = document.querySelector('tbody')!;
tableBody.innerHTML = '';
for (const user of userList) {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.age}</td>
`;
tr.addEventListener('click', () => {
selectedUser = user;
idInput.value = String(user.id);
nameInput.value = user.name;
ageInput.value = String(user.age);
});
tableBody.appendChild(tr);
}
}
// 初始渲染用户列表
renderUserList(userList);
```
在这个示例中,我们使用了一个 `User` 接口来定义用户的数据类型,包含 `id`、`name` 和 `age` 三个属性。我们使用了一些 DOM 操作来获取表单元素,并绑定了各种事件处理程序。我们还定义了一个 `userList` 数组来存储所有用户的信息,以及一个 `selectedUser` 变量来存储当前选中的用户。在表单提交事件处理程序中,我们根据表单输入的内容来新增或更新用户信息,并在完成操作后重置表单并重新渲染用户列表。在删除、更新、搜索等功能中,我们都需要先判断是否有选中的用户,并根据不同的操作来处理用户列表和表单状态。最后,我们定义了一个 `renderUserList` 函数来根据用户列表数据来渲染用户列表。