使用JavaScript编写代码,实现学生信息页面的功能。当学生点击增加、删除或修改按钮时,将弹出相应的对话框,学生可以在对话框中输入或修改学生信息,并保存到数据库中。
时间: 2024-05-06 13:16:58 浏览: 61
由于需要连接数据库,这里提供一个基本的代码框架,需要根据具体情况进行修改和完善。
```javascript
// 连接数据库
const db = connect('your_database_name');
// 获取增加、删除、修改按钮
const addButton = document.querySelector('#addButton');
const deleteButton = document.querySelector('#deleteButton');
const editButton = document.querySelector('#editButton');
// 给增加按钮添加点击事件
addButton.addEventListener('click', () => {
// 弹出增加对话框
const studentName = prompt('请输入学生姓名');
const studentAge = prompt('请输入学生年龄');
const studentGender = prompt('请输入学生性别');
// 将学生信息保存到数据库
db.collection('students').insertOne({
name: studentName,
age: studentAge,
gender: studentGender
});
});
// 给删除按钮添加点击事件
deleteButton.addEventListener('click', () => {
// 弹出删除对话框
const studentId = prompt('请输入要删除的学生ID');
// 从数据库中删除学生信息
db.collection('students').deleteOne({
_id: ObjectId(studentId)
});
});
// 给修改按钮添加点击事件
editButton.addEventListener('click', () => {
// 弹出修改对话框
const studentId = prompt('请输入要修改的学生ID');
const studentName = prompt('请输入修改后的学生姓名');
const studentAge = prompt('请输入修改后的学生年龄');
const studentGender = prompt('请输入修改后的学生性别');
// 更新数据库中的学生信息
db.collection('students').updateOne({
_id: ObjectId(studentId)
}, {
$set: {
name: studentName,
age: studentAge,
gender: studentGender
}
});
});
```
需要注意的是,这里使用了 `prompt` 弹出对话框,实际应用中可能需要使用更为美观的模态框。此外,由于涉及到数据库操作,建议在服务端使用 Node.js 编写代码,通过 API 接口提供服务,前端通过 AJAX 请求获取数据并更新页面。
阅读全文