使用html+css+js在ES6语法下完成一个学生信息管理系统实现增删改查操作

下面是一个使用HTML+CSS+JS在ES6语法下完成的学生信息管理系统的示例：

HTML部分：

<!DOCTYPE html>
<html>
<head>
    <title>学生信息管理系统</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        form {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>学生信息管理系统</h1>
    
    <form id="student-form">
        <h2>添加/编辑学生信息</h2>
        <label for="name">姓名:</label>
        <input type="text" id="name" required>
        <label for="age">年龄:</label>
        <input type="number" id="age" required>
        <label for="gender">性别:</label>
        <select id="gender">
            <option value="male">男</option>
            <option value="female">女</option>
        </select>
        <button type="submit" id="save-btn">保存</button>
        <button type="button" id="cancel-btn">取消</button>
    </form>
    
    <h2>学生列表</h2>
    
    <table id="student-table">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="student-list"></tbody>
    </table>
    
    <script src="script.js"></script>
</body>
</html>

CSS部分：

/* 样式已在HTML部分中给出 */

JS部分：

// 定义学生类
class Student {
    constructor(name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
}

// 初始化学生列表
let students = [];

// 获取DOM元素
const studentForm = document.getElementById('student-form');
const studentList = document.getElementById('student-list');

// 添加/编辑学生
studentForm.addEventListener('submit', (e) => {
    e.preventDefault();
    
    const name = document.getElementById('name').value;
    const age = document.getElementById('age').value;
    const gender = document.getElementById('gender').value;
    
    // 如果是编辑学生信息
    const saveBtn = document.getElementById('save-btn');
    if (saveBtn.dataset.id) {
        const studentId = saveBtn.dataset.id;
        students[studentId].name = name;
        students[studentId].age = age;
        students[studentId].gender = gender;
        saveBtn.removeAttribute('data-id');
    } else {
        const student = new Student(name, age, gender);
        students.push(student);
    }
    
    // 清空表单并重新渲染学生列表
    studentForm.reset();
    renderStudentList();
});

// 取消编辑学生信息
const cancelBtn = document.getElementById('cancel-btn');
cancelBtn.addEventListener('click', () => {
    studentForm.reset();
    const saveBtn = document.getElementById('save-btn');
    saveBtn.removeAttribute('data-id');
});

// 删除学生
const deleteStudent = (studentId) => {
    students.splice(studentId, 1);
    renderStudentList();
};

// 编辑学生
const editStudent = (studentId) => {
    const student = students[studentId];
    document.getElementById('name').value = student.name;
    document.getElementById('age').value = student.age;
    document.getElementById('gender').value = student.gender;
    const saveBtn = document.getElementById('save-btn');
    saveBtn.dataset.id = studentId;
};

// 渲染学生列表
const renderStudentList = () => {
    studentList.innerHTML = '';
    
    students.forEach((student, index) => {
        const row = document.createElement('tr');
        
        const nameCell = document.createElement('td');
        nameCell.textContent = student.name;
        row.appendChild(nameCell);
        
        const ageCell = document.createElement('td');
        ageCell.textContent = student.age;
        row.appendChild(ageCell);
        
        const genderCell = document.createElement('td');
        genderCell.textContent = student.gender;
        row.appendChild(genderCell);
        
        const actionCell = document.createElement('td');
        const editBtn = document.createElement('button');
        editBtn.textContent = '编辑';
        editBtn.addEventListener('click', () => {
            editStudent(index);
        });
        actionCell.appendChild(editBtn);
        
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = '删除';
        deleteBtn.addEventListener('click', () => {
            deleteStudent(index);
        });
        actionCell.appendChild(deleteBtn);
        
        row.appendChild(actionCell);
        
        studentList.appendChild(row);
    });
};

// 初始化页面
renderStudentList();

以上代码实现了一个简单的学生信息管理系统，可以添加、编辑、删除学生信息，并显示学生列表

使用html+css+js在ES6语法下完成一个学生信息管理系统实现增删改查操作