js完成一个学生管理系统的学生管理模块,包括学生信息查询,学生信息添加,学生信息修改和学生信息删除功能

由于您没有提供更多的具体信息，因此我将提供一个简单的示例代码，其中包括上述功能的基本实现。请注意，这里只提供前端代码，没有与后端的数据交互。

HTML代码：

<div id="student-management">
  <h2>学生信息管理</h2>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 学生信息列表将在此处显示 -->
    </tbody>
  </table>

  <h3>添加学生信息</h3>
  <form id="add-student-form">
    <label for="student-id">学号：</label>
    <input type="text" id="student-id" name="student-id" required>
    <br>
    <label for="student-name">姓名：</label>
    <input type="text" id="student-name" name="student-name" required>
    <br>
    <label for="student-age">年龄：</label>
    <input type="number" id="student-age" name="student-age" required>
    <br>
    <label for="student-gender">性别：</label>
    <select id="student-gender" name="student-gender" required>
      <option value=""></option>
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    <br>
    <button type="submit">添加</button>
  </form>

  <h3>修改学生信息</h3>
  <form id="edit-student-form">
    <input type="hidden" id="edit-student-id" name="edit-student-id">
    <label for="edit-student-name">姓名：</label>
    <input type="text" id="edit-student-name" name="edit-student-name" required>
    <br>
    <label for="edit-student-age">年龄：</label>
    <input type="number" id="edit-student-age" name="edit-student-age" required>
    <br>
    <label for="edit-student-gender">性别：</label>
    <select id="edit-student-gender" name="edit-student-gender" required>
      <option value=""></option>
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    <br>
    <button type="submit">保存</button>
    <button type="button" id="cancel-edit-student">取消</button>
  </form>
</div>

JavaScript代码：

// 获取学生管理模块
const studentManagement = document.getElementById('student-management');

// 获取表格和表格体
const table = studentManagement.querySelector('table');
const tableBody = table.querySelector('tbody');

// 获取表单元素
const addStudentForm = studentManagement.querySelector('#add-student-form');
const editStudentForm = studentManagement.querySelector('#edit-student-form');
const editStudentIdInput = studentManagement.querySelector('#edit-student-id');
const cancelEditStudentButton = studentManagement.querySelector('#cancel-edit-student');

// 定义一个数组来存储学生信息
let students = [];

// 获取学生信息列表
function getStudentList() {
  // 清空表格体
  tableBody.innerHTML = '';

  // 添加学生信息到表格体中
  students.forEach(student => {
    const row = tableBody.insertRow();
    row.innerHTML = `
      <td>${student.id}</td>
      <td>${student.name}</td>
      <td>${student.age}</td>
      <td>${student.gender === 'male' ? '男' : '女'}</td>
      <td>
        <button class="edit-student-button" data-id="${student.id}">编辑</button>
        <button class="delete-student-button" data-id="${student.id}">删除</button>
      </td>
    `;
  });

  // 添加编辑和删除事件监听器
  const editStudentButtons = tableBody.querySelectorAll('.edit-student-button');
  editStudentButtons.forEach(button => {
    button.addEventListener('click', () => {
      const studentId = button.getAttribute('data-id');
      const student = students.find(s => s.id === studentId);
      if (student) {
        editStudentIdInput.value = student.id;
        document.getElementById('edit-student-name').value = student.name;
        document.getElementById('edit-student-age').value = student.age;
        document.getElementById('edit-student-gender').value = student.gender;
        editStudentForm.classList.add('show');
      }
    });
  });

  const deleteStudentButtons = tableBody.querySelectorAll('.delete-student-button');
  deleteStudentButtons.forEach(button => {
    button.addEventListener('click', () => {
      const studentId = button.getAttribute('data-id');
      const studentIndex = students.findIndex(s => s.id === studentId);
      if (studentIndex >= 0) {
        students.splice(studentIndex, 1);
        getStudentList();
      }
    });
  });
}

// 添加学生信息
addStudentForm.addEventListener('submit', event => {
  event.preventDefault();

  const studentId = document.getElementById('student-id').value.trim();
  const studentName = document.getElementById('student-name').value.trim();
  const studentAge = parseInt(document.getElementById('student-age').value.trim());
  const studentGender = document.getElementById('student-gender').value.trim();

  const existingStudent = students.find(student => student.id === studentId);
  if (existingStudent) {
    alert('该学生已存在，请勿重复添加');
    return;
  }

  students.push({
    id: studentId,
    name: studentName,
    age: studentAge,
    gender: studentGender,
  });

  addStudentForm.reset();
  getStudentList();
});

// 取消编辑学生信息
cancelEditStudentButton.addEventListener('click', () => {
  editStudentForm.classList.remove('show');
});

// 修改学生信息
editStudentForm.addEventListener('submit', event => {
  event.preventDefault();

  const studentId = editStudentIdInput.value;
  const studentName = document.getElementById('edit-student-name').value.trim();
  const studentAge = parseInt(document.getElementById('edit-student-age').value.trim());
  const studentGender = document.getElementById('edit-student-gender').value.trim();

  const studentIndex = students.findIndex(student => student.id === studentId);
  if (studentIndex >= 0) {
    students[studentIndex].name = studentName;
    students[studentIndex].age = studentAge;
    students[studentIndex].gender = studentGender;
    editStudentForm.classList.remove('show');
    getStudentList();
  }
});

// 初始化学生信息列表
getStudentList();

这个示例代码可以在HTML中创建一个学生信息管理模块，包括一个表格来显示学生信息、一个表单来添加学生信息、一个表单来修改学生信息。JavaScript代码将管理学生信息的主要逻辑实现。请注意，这里只是一个简单的示例，需要根据您的实际需求进行修改和优化。