WebAPIs--新增学员案例

最新推荐文章于 2025-11-04 18:05:36 发布
原创最新推荐文章于 2025-11-04 18:05:36 发布 · 102 阅读
CC 4.0 BY-SA版权
文章标签：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学员管理页面</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            margin: 40px;
            line-height: 1.6;
        }

        h2 {
            text-align: center;
            margin-bottom: 30px;
            font-weight: 600;
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            margin-bottom: 30px;
        }

        .form-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-group label {
            min-width: 60px;
            text-align: right;
        }

        input,
        select {
            padding: 6px 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }

        button {
            padding: 6px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        /* 删除按钮样式 */
        button.delete {
            background-color: #dc3545;
        }

        button.delete:hover {
            background-color: #bb2d3b;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #dee2e6;
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #f8f9fa;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <!-- 新增学员区域 -->
    <h2>新增学员</h2>
    <div class="form-row">
        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" id="name" placeholder="请输入姓名">
        </div>
        <div class="form-group">
            <label for="age">年龄：</label>
            <input type="number" id="age" placeholder="请输入年龄">
        </div>
        <div class="form-group">
            <label for="gender">性别：</label>
            <select id="gender">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div class="form-group">
            <label for="salary">薪资：</label>
            <input type="number" id="salary" placeholder="请输入薪资">
        </div>
        <div class="form-group">
            <label for="city">就业城市：</label>
            <select id="city">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
            </select>
        </div>
        <div class="form-group">
            <button>录入</button>
        </div>
    </div>

    <!-- 就业榜区域 -->
    <h2>就业榜</h2>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="studentTable">
            <!-- 动态渲染区域 -->
        </tbody>
    </table>

    <script>
        // 存储学员数据的数组（使用let声明）
        let arr = [];
        // 获取DOM元素（使用let声明）
        let nameInput = document.getElementById('name');
        let ageInput = document.getElementById('age');
        let genderInput = document.getElementById('gender');
        let salaryInput = document.getElementById('salary');
        let cityInput = document.getElementById('city');
        let addBtn = document.querySelector('button');
        let studentTable = document.getElementById('studentTable');

        // 录入按钮点击事件
        addBtn.addEventListener('click', function () {
            // 获取输入值并验证（使用let声明变量）
            let name = nameInput.value.trim();
            let age = ageInput.value.trim();
            let salary = salaryInput.value.trim();

            if (!name || !age || !salary) {
                alert('请填写姓名、年龄和薪资信息');
                return;
            }

            // 创建新学员对象（使用let声明）
            let obj = {
                id: arr.length + 1,
                name: name,
                age: age,
                gender: genderInput.value,
                salary: salary,
                city: cityInput.value
            };

            // 添加到数组
            arr.push(obj);
            // 重新渲染表格
            renderTable();

            // 清空表单
            nameInput.value = '';
            ageInput.value = '';
            salaryInput.value = '';
            genderInput.value = '男';
            cityInput.value = '北京';
        });

        // 渲染表格函数（不使用forEach，改用for循环）
        function renderTable() {
            // 清空表格
            studentTable.innerHTML = '';

            // 用for循环遍历数组（使用let声明循环变量）
            for (let i = 0; i < arr.length; i++) {
                let student = arr[i];
                let tr = document.createElement('tr');
                tr.innerHTML = '<td>' + student.id + '</td>' +
                    '<td>' + student.name + '</td>' +
                    '<td>' + student.age + '</td>' +
                    '<td>' + student.gender + '</td>' +
                    '<td>' + student.salary + '</td>' +
                    '<td>' + student.city + '</td>' +
                    '<td><button class="delete" data-id="' + student.id + '">删除</button></td>';
                studentTable.appendChild(tr);
            }

            // 绑定删除事件（用for循环替代forEach）
            let deleteBtns = document.querySelectorAll('.delete');
            for (let j = 0; j < deleteBtns.length; j++) {
                deleteBtns[j].addEventListener('click', function () {
                    // 获取当前要删除的学员ID（使用let声明）
                    let id = parseInt(this.getAttribute('data-id'));
                    // 确认删除
                    if (confirm('确定要删除ID为' + id + '的学员吗？')) {
                        // 查找要删除的索引（用for循环替代findIndex）
                        let deleteIndex = -1;
                        for (let k = 0; k < arr.length; k++) {
                            if (arr[k].id === id) {
                                deleteIndex = k;
                                break;
                            }
                        }
                        // 执行删除并重新渲染
                        if (deleteIndex !== -1) {
                            arr.splice(deleteIndex, 1);
                            renderTable();
                        }
                    }
                });
            }
        }

        // 辅助函数：格式化学号为3位数字（如1→001）
        function formatId(id) {
            let str = id.toString();
            while (str.length < 3) {
                str = '0' + str;
            }
            return str;
        }
    </script>
</body>

</html>