1 创建一个HTML页面包含学生信息的表格和操作按钮添加、编辑、删除。2 使用JavaScript编写前端逻辑包括获取学生信息、将学生信息显示在表格中、处理用户操作等。

HTML页面代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>学生信息管理</title>
  <style>
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 5px;
    }
    .btn {
      margin: 5px;
    }
  </style>
</head>
<body>
  <h1>学生信息管理</h1>
  <form id="student-form">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required>
    <label for="age">年龄:</label>
    <input type="number" id="age" name="age" required>
    <button type="submit" class="btn">添加</button>
  </form>
  <table id="student-table">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

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

JavaScript代码如下：

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('student-form');
  const tableBody = document.querySelector('#student-table tbody');
  let students = [];

  form.addEventListener('submit', function(event) {
    event.preventDefault();
    const name = document.getElementById('name').value;
    const age = document.getElementById('age').value;
    const student = { name, age };
    students.push(student);
    renderTable();
    form.reset();
  });

  function renderTable() {
    tableBody.innerHTML = '';
    for (let i = 0; i < students.length; i++) {
      const student = students[i];
      const row = document.createElement('tr');
      const nameCell = document.createElement('td');
      nameCell.textContent = student.name;
      const ageCell = document.createElement('td');
      ageCell.textContent = student.age;
      const actionCell = document.createElement('td');
      const editBtn = document.createElement('button');
      editBtn.textContent = '编辑';
      editBtn.addEventListener('click', function() {
        editStudent(i);
      });
      const deleteBtn = document.createElement('button');
      deleteBtn.textContent = '删除';
      deleteBtn.addEventListener('click', function() {
        deleteStudent(i);
      });
      actionCell.appendChild(editBtn);
      actionCell.appendChild(deleteBtn);
      row.appendChild(nameCell);
      row.appendChild(ageCell);
      row.appendChild(actionCell);
      tableBody.appendChild(row);
    }
  }

  function editStudent(index) {
    const student = students[index];
    const nameInput = document.getElementById('name');
    const ageInput = document.getElementById('age');
    nameInput.value = student.name;
    ageInput.value = student.age;
    students.splice(index, 1);
    renderTable();
  }

  function deleteStudent(index) {
    students.splice(index, 1);
    renderTable();
  }
});

在这个示例中，我们使用了HTML来创建一个包含学生信息的表格和一个表单来添加新的学生。JavaScript代码处理了表单提交事件，将学生信息添加到学生数组中，并使用renderTable()函数来更新表格显示。renderTable()函数会在每次添加、编辑、删除学生时被调用，它通过遍历学生数组来创建表格的行和单元格，并为每个学生添加编辑和删除按钮的事件处理程序。编辑按钮的事件处理程序调用editStudent()函数，将学生信息填充到表单中，并从学生数组中删除该学生。删除按钮的事件处理程序调用deleteStudent()函数，从学生数组中删除该学生。

1 创建一个HTML页面包含学生信息的表格和操作按钮添加、编辑、删除。2 使用JavaScript编写前端逻辑包括获取学生信息、将学生信息显示在表格中、处理用户操作等。