好的，我可以帮您
实现一个
简单的增删改查页面
demo，以下是
代码实现：
HTML部分：
```
<!DOCTYPE
html>
<
html>
<head>
<title>增删改查页面
demo</title>
<l
ink href="style.
css" rel="stylesheet">
</head>
<body>
<h1>学生信息管理系统</h1>
<div id="container">
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<form id="form">
<input type="hidden" id="id">
<label for="name">姓名:</label>
<input type="text" id="name" required><br>
<label for="age">年龄:</label>
<input type="number" id="age" required><br>
<
button type="submit" id="submit">保存</
button>
<
button type="
button" id="cancel">取消</
button>
</form>
<
button type="
button" id="add">添加</
button>
</div>
<script src="script.js"></script>
</body>
</
html>
```
CSS部分：
```
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
#container {
margin: 0 auto;
width: 80%;
}
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
input[type=text], input[type=number] {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
button {
background-color: #4CAF50;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#form {
display: none;
}
.hide {
display: none;
}
```
JavaScript部分：
```
// 初始化数据
let students = [
{id: 1, name: '张三', age: 18},
{id: 2, name: '李四', age: 20},
{id: 3, name: '王五', age: 22},
];
// 获取元素
const tbody = document.querySelector('#tbody');
const form = document.querySelector('#form');
const id = document.querySelector('#id');
const name = document.querySelector('#name');
const age = document.querySelector('#age');
const submit = document.querySelector('#submit');
const cancel = document.querySelector('#cancel');
const add = document.querySelector('#add');
// 渲染表格
function render() {
tbody.inner
HTML = '';
for (let i = 0; i < students.length; i++) {
const tr = document.createElement('tr');
tr.inner
HTML = `
<td>${students[i].id}</td>
<td>${students[i].name}</td>
<td>${students[i].age}</td>
<td>
<
button class="edit" data-id="${students[i].id}">编辑</
button>
<
button class="delete" data-id="${students[i].id}">删除</
button>
</td>
`;
tbody.appendChild(tr);
}
}
// 渲染表格
render();
// 添加学生
function addStudent() {
const maxId = students.reduce((prev, curr) => prev.id > curr.id ? prev : curr).id;
const student = {
id: maxId + 1,
name: name.value,
age: age.value,
};
students.push(student);
render();
}
// 编辑学生
function editStudent(id) {
const student = students.find(item => item.id === id);
name.value = student.name;
age.value = student.age;
form.style.display = 'block';
}
// 删除学生
function deleteStudent(id) {
const index = students.findIndex(item => item.id === id);
students.splice(index, 1);
render();
}
// 保存学生
function saveStudent(e) {
e.preventDefault();
const student = {
id: id.value,
name: name.value,
age: age.value,
};
if (id.value) {
const index = students.findIndex(item => item.id === Number(id.value));
students[index] = student;
} else {
addStudent();
}
form.style.display = 'none';
id.value = '';
name.value = '';
age.value = '';
}
// 取消保存
function cancelSave() {
form.style.display = 'none';
id.value = '';
name.value = '';
age.value = '';
}
// 编辑或删除学生
function handleTableClick(e) {
const target = e.target;
const id = target.dataset.id;
if (target.classList.contains('edit')) {
editStudent(id);
} else if (target.classList.contains('delete')) {
deleteStudent(id);
}
}
// 添加学生
按钮点击事件
add.addEventListener('click', () => {
form.style.display = 'block';
});
// 编辑或删除学生
按钮点击事件
tbody.addEventListener('click', handleTableClick);
// 保存
按钮点击事件
submit.addEventListener('click', saveStudent);
// 取消
按钮点击事件
cancel.addEventListener('click', cancelSave);
```
以上就是
实现增删改查页面
demo的完整
代码，您可以将它们保存成三个文件：`index.
html`、`style.
css`和`script.js`，并在浏览器中打开`index.
html`查看效果。
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
