写一份html用户管理代码
时间: 2023-06-30 13:09:08 浏览: 45
以下是一个简单的HTML用户管理代码,包含添加、编辑和删除用户的功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>用户管理</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
</style>
</head>
<body>
<h1>用户管理</h1>
<form id="user-form">
<input type="hidden" id="user-id" name="user-id">
<label for="user-name">用户名:</label>
<input type="text" id="user-name" name="user-name"><br>
<label for="user-email">邮箱:</label>
<input type="email" id="user-email" name="user-email"><br>
<button type="submit">保存</button>
<button type="button" onclick="clearForm()">取消</button>
</form>
<table>
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody id="user-list">
</tbody>
</table>
<script>
const userList = document.getElementById('user-list');
const userForm = document.getElementById('user-form');
const userIdInput = document.getElementById('user-id');
const userNameInput = document.getElementById('user-name');
const userEmailInput = document.getElementById('user-email');
let users = [];
function renderUsers() {
userList.innerHTML = '';
users.forEach(user => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.email}</td>
<td>
<button type="button" onclick="editUser(${user.id})">编辑</button>
<button type="button" onclick="deleteUser(${user.id})">删除</button>
</td>
`;
userList.appendChild(row);
});
};
function clearForm() {
userForm.reset();
userIdInput.value = '';
}
function addUser(e) {
e.preventDefault();
const name = userNameInput.value;
const email = userEmailInput.value;
const id = users.length + 1;
users.push({
id,
name,
email
});
renderUsers();
clearForm();
}
function editUser(id) {
const user = users.find(user => user.id === id);
userNameInput.value = user.name;
userEmailInput.value = user.email;
userIdInput.value = user.id;
}
function updateUser(e) {
e.preventDefault();
const id = parseInt(userIdInput.value);
const name = userNameInput.value;
const email = userEmailInput.value;
const userIndex = users.findIndex(user => user.id === id);
users[userIndex] = {
id,
name,
email
};
renderUsers();
clearForm();
}
function deleteUser(id) {
const userIndex = users.findIndex(user => user.id === id);
users.splice(userIndex, 1);
renderUsers();
}
userForm.addEventListener('submit', addUser);
userForm.addEventListener('submit', updateUser);
</script>
</body>
</html>
```
该代码使用了HTML、CSS和JavaScript,包括一个表单用于添加和编辑用户,以及一个表格用于显示所有用户。用户数据存储在一个数组中,可以通过添加、编辑和删除用户来更新该数组,并在表格中显示更新后的用户数据。