写一份html后台管理代码具有对用户的增,删,改,查看用户信息功能中文版
时间: 2023-11-27 07:06:19 浏览: 33
以下是一个简单的HTML后台管理代码,具备对用户进行增、删、改、查看信息等功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理系统</title>
</head>
<body>
<h1>用户管理系统</h1>
<!-- 用户信息表格 -->
<table>
<tr>
<th>用户ID</th>
<th>用户名</th>
<th>密码</th>
<th>操作</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>123456</td>
<td>
<button onclick="editUser(001)">编辑</button>
<button onclick="deleteUser(001)">删除</button>
</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>abcdef</td>
<td>
<button onclick="editUser(002)">编辑</button>
<button onclick="deleteUser(002)">删除</button>
</td>
</tr>
<!-- 其他用户信息行 -->
</table>
<!-- 添加用户表单 -->
<form id="addUserForm" style="display: none;">
<h2>添加用户</h2>
<label for="userId">用户ID:</label>
<input type="text" id="userId" required><br>
<label for="userName">用户名:</label>
<input type="text" id="userName" required><br>
<label for="userPassword">密码:</label>
<input type="password" id="userPassword" required><br>
<button type="submit">添加</button>
<button type="button" onclick="hideAddUserForm()">取消</button>
</form>
<!-- 编辑用户表单 -->
<form id="editUserForm" style="display: none;">
<h2>编辑用户</h2>
<label for="editUserId">用户ID:</label>
<input type="text" id="editUserId" required disabled><br>
<label for="editUserName">用户名:</label>
<input type="text" id="editUserName" required><br>
<label for="editUserPassword">密码:</label>
<input type="password" id="editUserPassword" required><br>
<button type="submit">保存</button>
<button type="button" onclick="hideEditUserForm()">取消</button>
</form>
<!-- 按钮区域 -->
<div>
<button onclick="showAddUserForm()">添加用户</button>
</div>
<!-- JavaScript代码 -->
<script>
// 显示添加用户表单
function showAddUserForm() {
document.getElementById("addUserForm").style.display = "block";
}
// 隐藏添加用户表单
function hideAddUserForm() {
document.getElementById("addUserForm").style.display = "none";
// 清空表单数据
document.getElementById("userId").value = "";
document.getElementById("userName").value = "";
document.getElementById("userPassword").value = "";
}
// 显示编辑用户表单
function editUser(id) {
// 填充表单数据
document.getElementById("editUserId").value = id;
document.getElementById("editUserName").value = "填充用户数据";
document.getElementById("editUserPassword").value = "填充用户数据";
document.getElementById("editUserForm").style.display = "block";
}
// 隐藏编辑用户表单
function hideEditUserForm() {
document.getElementById("editUserForm").style.display = "none";
// 清空表单数据
document.getElementById("editUserId").value = "";
document.getElementById("editUserName").value = "";
document.getElementById("editUserPassword").value = "";
}
// 删除用户
function deleteUser(id) {
// 确认是否删除
if (confirm("确定删除该用户吗?")) {
// 执行删除操作
alert("删除用户:" + id);
}
}
</script>
</body>
</html>
```
在这个代码中,我们创建了一个简单的用户管理系统,包括一个用户信息表格和添加、编辑、删除用户的功能。当用户点击“添加用户”按钮时,会弹出添加用户表单,用户填写完毕后点击“添加”按钮即可添加新用户。当用户点击某个用户的“编辑”按钮时,会弹出编辑用户表单,用户可以修改该用户的用户名和密码,并保存修改。当用户点击某个用户的“删除”按钮时,会弹出确认框,用户确认后即可删除该用户。
当然,这只是一个简单的示例代码,实际的后台管理系统可能会更加复杂,需要更多的功能和界面设计。