• 日期: 2028-01-20
  • 标签: 科技

以下是一个使用HTML、CSS和JavaScript（ES6语法）完成的学生信息管理系统的示例代码：

HTML部分：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>学生信息管理系统</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>学生信息管理系统</h1>

  <div id="controls">
    <button id="addBtn">增加</button>
    <button id="deleteBtn">删除</button>
    <button id="updateBtn">更改</button>
    <button id="viewBtn">查看</button>
  </div>

  <div id="studentList">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>学号</th>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>

    <div id="pagination"></div>
  </div>

  <div id="overlay"></div>
  <div id="modal">
    <h2 id="modalTitle"></h2>
    <form id="modalForm">
      <label for="studentId">学号：</label>
      <input type="text" id="studentId" required><br>
      <label for="studentName">姓名：</label>
      <input type="text" id="studentName" required><br>
      <label for="studentAge">年龄：</label>
      <input type="number" id="studentAge" required><br>
      <button type="submit" id="modalSubmit"></button>
    </form>
  </div>

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

CSS部分（style.css）：

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

h1 {
  text-align: center;
}

#controls {
  margin-bottom: 20px;
}

#studentList table {
  width: 100%;
  border-collapse: collapse;
}

#studentList th, #studentList td {
  border: 1px solid #ddd;
  padding: 8px;
}

#pagination {
  text-align: center;
  margin-top: 20px;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

#modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  display: none;
}

#modalTitle {
  text-align: center;
}

#modalForm label {
  display: inline-block;
  width: 60px;
  text-align: right;
  margin-right: 10px;
}

#modalForm input {
  width: 200px;
  margin-bottom: 10px;
}

#modalSubmit {
  margin-left: 70px;
}

JavaScript部分（script.js）：

// 学生信息列表
let studentData = [];

// 当前页数
let currentPage = 1;

// 每页显示的学生数量
const pageSize = 10;

// 获取DOM元素
const addBtn = document.getElementById('addBtn');
const deleteBtn = document.getElementById('deleteBtn');
const updateBtn = document.getElementById('updateBtn');
const viewBtn = document.getElementById('viewBtn');
const studentList = document.querySelector('#studentList tbody');
const pagination = document.getElementById('pagination');
const overlay = document.getElementById('overlay');
const modal = document.getElementById('modal');
const modalTitle = document.getElementById('modalTitle');
const modalForm = document.getElementById('modalForm');
const modalSubmit = document.getElementById('modalSubmit');
const studentIdInput = document.getElementById('studentId');
const studentNameInput = document.getElementById('studentName');
const studentAgeInput = document.getElementById('studentAge');

// 初始化学生列表和分页
function initStudentList() {
  // 清空学生列表
  studentList.innerHTML = '';

  // 计算当前页的起始学生索引和结束学生索引
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;

  // 获取当前页的学生数据
  const currentStudents = studentData.slice(startIndex, endIndex);

  // 遍历学生数据，生成表格行
  currentStudents.forEach(student => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td><input type="checkbox" value="${student.id}"></td>
      <td>${student.id}</td>
      <td>${student.name}</td>
      <td>${student.age}</td>
    `;
    studentList.appendChild(tr);
  });

  // 更新分页导航
  updatePagination();
}

// 更新分页导航
function updatePagination() {
  // 计算总页数
  const totalPages = Math.ceil(studentData.length / pageSize);

  // 清空分页导航
  pagination.innerHTML = '';

  // 生成并添加页码按钮
  for (let i = 1; i <= totalPages; i++) {
    const pageBtn = document.createElement('button');
    pageBtn.innerText = i;
    pageBtn.addEventListener('click', () => {
      currentPage = i;
      initStudentList();
    });
    pagination.appendChild(pageBtn);
  }
}

// 显示模态框
function showModal(title, submitText, onSubmit) {
  overlay.style.display = 'block';
  modal.style.display = 'block';
  modalTitle.innerText = title;
  modalSubmit.innerText = submitText;

  // 清空输入框的值
  studentIdInput.value = '';
  studentNameInput.value = '';
  studentAgeInput.value = '';

  // 设置模态框提交事件
  modalForm.onsubmit = e => {
    e.preventDefault();
    onSubmit();
  };
}

// 隐藏模态框
function hideModal() {
  overlay.style.display = 'none';
  modal.style.display = 'none';
}

// 增加学生信息
function addStudent() {
  showModal('增加学生', '确定', () => {
    const id = studentIdInput.value.trim();
    const name = studentNameInput.value.trim();
    const age = studentAgeInput.value.trim();

    // 验证输入的学生信息
    if (!id || !name || !age) {
      alert('请输入完整的学生信息');
      return;
    }

    // 添加学生到列表末尾
    studentData.push({
      id: id,
      name: name,
      age: age
    });

    // 隐藏模态框
    hideModal();

    // 初始化学生列表
    initStudentList();
  });
}

// 删除选中的学生信息
function deleteStudent() {
  const selectedStudents = Array.from(document.querySelectorAll('#studentList input:checked'));
  if (selectedStudents.length === 0) {
    alert('请选择要删除的学生');
    return;
  }

  // 获取选中学生的ID
  const selectedIds = selectedStudents.map(student => student.value);

  // 根据ID过滤出未选中的学生
  studentData = studentData.filter(student => !selectedIds.includes(student.id));

  // 初始化学生列表
  initStudentList();
}

// 更改选中的学生信息
function updateStudent() {
  const selectedStudents = Array.from(document.querySelectorAll('#studentList input:checked'));
  if (selectedStudents.length !== 1) {
    alert('请选择一个要更改的学生');
    return;
  }

  // 获取选中学生的ID
  const selectedId = selectedStudents[0].value;

  // 根据ID查找学生信息
  const selectedStudent = studentData.find(student => student.id === selectedId);

  // 填充模态框的输入框
  studentIdInput.value = selectedStudent.id;
  studentNameInput.value = selectedStudent.name;
  studentAgeInput.value = selectedStudent.age;

  showModal('更改学生', '确定', () => {
    const id = studentIdInput.value.trim();
    const name = studentNameInput.value.trim();
    const age = studentAgeInput.value.trim();

    // 验证输入的学生信息
    if (!id || !name || !age) {
      alert('请输入完整的学生信息');
      return;
    }

    // 更新学生信息
    selectedStudent.id = id;
    selectedStudent.name = name;
    selectedStudent.age = age;

    // 隐藏模态框
    hideModal();

    // 初始化学生列表
    initStudentList();
  });
}

// 查看选中的学生信息
function viewStudent() {
  const selectedStudents = Array.from(document.querySelectorAll('#studentList input:checked'));
  if (selectedStudents.length !== 1) {
    alert('请选择一个要查看的学生');
    return;
  }

  // 获取选中学生的ID
  const selectedId = selectedStudents[0].value;

  // 根据ID查找学生信息
  const selectedStudent = studentData.find(student => student.id === selectedId);

  showModal('查看学生', '关闭', () => {
    hideModal();
  });

  // 填充模态框的输入框（只读）
  studentIdInput.value = selectedStudent.id;
  studentNameInput.value = selectedStudent.name;
  studentAgeInput.value = selectedStudent.age;

  // 禁用输入框
  studentIdInput.disabled = true;
  studentNameInput.disabled = true;
  studentAgeInput.disabled = true;

  // 隐藏确定按钮
  modalSubmit.style.display = 'none';
}

// 绑定按钮点击事件
addBtn.addEventListener('click', addStudent);
deleteBtn.addEventListener('click', deleteStudent);
updateBtn.addEventListener('click', updateStudent);
viewBtn.addEventListener('click', viewStudent);

// 初始化学生列表
initStudentList();

这个学生信息管理系统使用了HTML、CSS和JavaScript（ES6语法）来实现。页面中有四个按钮（增加、删除、更改和查看），点击按钮会触发相应的功能。其中，增加按钮会弹出一个小框显示需要填入的信息，用户点击确定按钮后会在学生列表中添加一个新的学生。删除按钮会删除用户选择的学生（根据复选框勾选）。更改按钮会弹出一个小框显示当前选中学生的信息，用户可以在其中进行修改，并点击确定按钮后完成更改，然后刷新学生列表。查看按钮会生成一个小框显示当前选中学生的信息。每页最多显示十个学生信息，并实现了翻页功能

使用html+css+js在ES6语法下完成一个学生信息管理系统页面中有四个按钮分别对应增加删改更改查看四个功能点击增加则出现一个小框显示需要填入的信息框中包括确定按钮点击确定则在学生列表中添加一个学生在末尾。点击删除则删除对应复选框勾选的学生。点击更改则更改对应复选框学生的信息显示一个小框框中有当前学生的信息用户可以对其做出修改其中有一确定按钮点击确定则更改成功刷新学生列表点击查看则生成一个小框

原文地址: https://www.cveoy.top/t/topic/hRXe 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录