无需等待，快来学习JavaScript构建高效的简单学生管理系统

前端

2023-06-23 17:05:30

利用 JavaScript 打造你的学生管理系统

1. 搭建高效的学生管理系统

想要打造一个便捷易用的学生管理系统，JavaScript 无疑是你的最佳选择。它能助你轻松实现添加、删除、修改和查询学生信息的功能。本文将手把手带你使用 JavaScript 构建一个完整的学生管理系统，快来了解一下它的魅力吧！

2. 总览效果图

添加新学生信息： 只需填写学生姓名和学号，点击“添加学生”按钮即可。
查看学生信息： 输入学号或姓名，点击“查询学生”按钮，轻松找到对应信息。
修改学生信息： 找到要修改的学生，点击“修改学生”按钮，输入新信息后点击“确定修改”即可。
删除学生信息： 找到要删除的学生，点击“删除学生”按钮即可。

3. 代码实战

HTML 部分： 这是前端用户界面，负责展示和收集用户输入的信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>学生管理系统</h1>
    <form>
        <label for="studentName">姓名：</label>
        <input type="text" id="studentName">
        <label for="studentNumber">学号：</label>
        <input type="number" id="studentNumber">
        <button type="button" id="addStudentButton">添加学生</button>
    </form>

    <br>

    <form>
        <label for="searchStudent">学号/姓名：</label>
        <input type="text" id="searchStudent">
        <button type="button" id="searchStudentButton">查询学生</button>
    </form>

    <br>

    <table id="studentTable">
        <thead>
            <tr>
                <th>姓名</th>
                <th>学号</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script src="script.js"></script>
</body>
</html>

JavaScript 部分： 系统的大脑，负责处理用户输入的信息，实现增、删、改、查功能。

// 学生管理系统 JavaScript 代码

// 学生列表
let students = [];

// 获取 DOM 元素
const studentNameInput = document.getElementById('studentName');
const studentNumberInput = document.getElementById('studentNumber');
const addStudentButton = document.getElementById('addStudentButton');
const searchStudentInput = document.getElementById('searchStudent');
const searchStudentButton = document.getElementById('searchStudentButton');
const studentTable = document.getElementById('studentTable');

// 添加学生
const addStudent = (e) => {
    e.preventDefault();

    // 获取学生信息
    const studentName = studentNameInput.value;
    const studentNumber = studentNumberInput.value;

    // 创建学生对象
    const student = {
        name: studentName,
        number: studentNumber
    };

    // 将学生对象添加到学生列表
    students.push(student);

    // 清空输入框
    studentNameInput.value = '';
    studentNumberInput.value = '';

    // 刷新学生表格
    refreshStudentTable();
};

// 查询学生
const searchStudent = (e) => {
    e.preventDefault();

    // 获取查询条件
    const searchTerm = searchStudentInput.value;

    // 过滤学生列表
    const filteredStudents = students.filter(student => {
        return student.name.includes(searchTerm) || student.number.includes(searchTerm);
    });

    // 刷新学生表格
    refreshStudentTable(filteredStudents);
};

// 刷新学生表格
const refreshStudentTable = (filteredStudents) => {
    // 清空表格内容
    studentTable.tBodies[0].innerHTML = '';

    // 遍历学生列表
    let studentsToDisplay = filteredStudents || students;
    studentsToDisplay.forEach(student => {
        // 创建表格行
        const row = document.createElement('tr');

        // 创建表格单元格
        const nameCell = document.createElement('td');
        const numberCell = document.createElement('td');
        const actionCell = document.createElement('td');

        // 设置单元格内容
        nameCell.textContent = student.name;
        numberCell.textContent = student.number;

        // 创建操作按钮
        const editButton = document.createElement('button');
        editButton.textContent = '修改';
        editButton.addEventListener('click', () => {
            // 在这里实现修改学生信息的功能
        });

        const deleteButton = document.createElement('button');
        deleteButton.textContent = '删除';
        deleteButton.addEventListener('click', () => {
            // 在这里实现删除学生信息的功能
        });

        // 将操作按钮添加到操作单元格
        actionCell.appendChild(editButton);
        actionCell.appendChild(deleteButton);

        // 将单元格添加到表格行
        row.appendChild(nameCell);
        row.appendChild(numberCell);
        row.appendChild(actionCell);

        // 将表格行添加到表格中
        studentTable.tBodies[0].appendChild(row);
    });
};

// 添加事件监听器
addStudentButton.addEventListener('click', addStudent);
searchStudentButton.addEventListener('click', searchStudent);