学生管理系统网页版

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生管理系统</title>
    <style>
        td {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>学生管理系统</h1>
    
    <div>
        <form action="">
            <h2>增加</h2>
            <div class="input-wrap">
                <label for="name">姓名：</label>
                <input type="text" id="name">
            </div>

</div>
</div>

show();

        //增加
        let add = document.getElementById(\'add\');
        add.onclick = function () {
            let addMale = document.getElementById(\'addMale\');
            let addFemale = document.getElementById(\'addFemale\');
            let name = document.getElementById(\'name\');
            let age = document.getElementById(\'age\');
            let id = maxId();

let students = get(\'students\', []);
let gender;

            if (addMale.checked) {
                gender = addMale.value;
            } else if (addFemale.checked) {
                gender = addFemale.value;
            } else {
                gender = \'\';
            }
            if (name.value && age.value && gender) {
                students.push({
                    id: id,
                    name: name.value,
                    gender: gender,
                    age: age.value
                });
                save(\'students\', students);
            } else {
                alert(\'请填写完所有资料再进行增加\');
            }
            show();
        }

        //遍历
        function show(studentArr) {
            let tbody = document.getElementById(\'tbody\');
            let students = studentArr || get(\'students\', []);

        //获取id
        function maxId() {
            let id = 0;
            let students = get(\'students\', []);
            for (let i = 0; i < students.length; i++) {
                if (students[i].id > id) {
                    id = students[i].id;
                }
            }
            ++id;
            return id;
        }

        // 删除
        function remove() {
            let deleteBtn = document.querySelectorAll(\'#tbody input[value=删除]\');
            for (let i = 0; i < deleteBtn.length; i++) {
                let students = get(\'students\', []);
                deleteBtn[i].onclick = function () {
                    for (let j = 0; j < students.length; j++) {
                        if (students[j].id == this.dataset.id) {
                            students.splice(j, 1);
                            save(\'students\', students);
                            show();
                            return;
                        }
                    }
                }
            }
        }

        //在修改的那一栏中显示相应信息和修改
        function display() {
            let xgName = document.getElementById(\'xgName\');
            let xgAge = document.getElementById(\'xgAge\');
            let xgGender = document.querySelectorAll(\'.xgGender\');
            let students = get(\'students\', []);
            let deleteBtn = document.querySelectorAll(\'#tbody input[value=修改]\');
            for (let i = 0; i < deleteBtn.length; i++) {
                deleteBtn[i].onclick = function () {
                    for (let j = 0; j < students.length; j++) {
                        if (students[j].id == this.dataset.id) {
                            xgName.value = students[j].name;
                            xgAge.value = students[j].age;
                            document.querySelector(`[name=gender][value=${students[j].gender}]`).checked = true;
                            for (let k = 0; k < xgGender.length; k++) {
                                if (xgGender[k].value == students[j].gender) {
                                    xgGender[k].checked = true;

xgBtn.onclick = function () {
let gender;

                                        for (let h = 0; h < xgGender.length; h++) {
                                            if (xgGender[h].checked) {
                                                gender = xgGender[h].value;
                                            }
                                        }

                                        students[j].name = xgName.value;
                                        students[j].gender = gender;
                                        students[j].age = xgAge.value;
                                        save(\'students\', students);
                                        show();

                                        xgName.value = \'\';
                                        xgAge.value = \'\';
                                        xgGender[0].checked = false;
                                        xgGender[1].checked = false;

return;
}

                                }
                            }
                        }
                    }
                }

}
}

        //搜索
        function searchFn() {
            let searchBtn = document.getElementById(\'searchBtn\');
            let searchInput = document.getElementById(\'searchInput\');
            let neirong = document.getElementById(\'neirong\');
            let select = document.getElementById(\'select\');
            searchBtn.onclick = function () {
                let change = select.value;
                let value = searchInput.value;
                let students = get(\'students\', []);
                let studentArr = [];
                for (let i = 0; i < students.length; i++) {
                    if (students[i][change].search(value) >= 0) {
                        studentArr.push(students[i]);
                    }
                }
                show(studentArr);
            }
        }
    </script>
</body>

</html>