学生管理系统网页版

<!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 class="input-wrap">
                <label for="age">年龄：</label>
                <input type="text" id="age">
            </div>

<div class="input-wrap">
                <label for="sex">性别：</label>
                <input type="radio" name=‘sex‘ id="addMale" value="男">男
                <input type="radio" name=‘sex‘ id="addFemale" value="女">女
            </div>
            <button id=‘add‘>增加</button>
        </form>
    </div>

<div>
        <h2>修改</h2>
        <div class="input-wrap">
            <label for="name">姓名：</label>
            <input type="text" id="xgName">
        </div>

<div class="input-wrap">
            <label for="age">年龄：</label>
            <input type="text" id="xgAge">
        </div>

<div class="input-wrap">
            <label for="sex">性别：</label>
            <input type="radio" name=‘gender‘ class=‘xgGender‘ value="男">男
            <input type="radio" name=‘gender‘ class=‘xgGender‘ value="女">女
        </div>
        <button id=‘xgBtn‘>修改</button>
    </div>

<div>
        <select name="student" id="select">
            <option value="name" selected>姓名</option>
            <option value="gender">性别</option>
            <option value="age">年龄</option>
        </select>

<input type="text" id=‘searchInput‘>
        <button id=‘searchBtn‘>搜索</button>
        <div id=‘neirong‘>

</div>
    </div>

<table>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tbody id=‘tbody‘></tbody>
    </table>

<script src="../../函数库/util.js"></script>
    <script>
        let tbody = document.getElementById(‘tbody‘);
        let option = document.querySelectorAll(‘#select  option‘);

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‘, []);

let str = ‘‘;
            for (let i = 0; i < students.length; i++) {
                str += `<tr>
                <td>${students[i].id}</td>
                <td>${students[i].name}</td>
                <td>${students[i].gender}</td>
                <td>${students[i].age}</td>
                <td><input type="button" data-id=${students[i].id}  value=‘修改‘></td>
                <td><input type="button" data-id=${students[i].id} value=‘删除‘></td>
                </tr>`
            }
            tbody.innerHTML = str;
            remove();
            display();
            searchFn();
        }

//获取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>

原文地址：https://www.cnblogs.com/yehongrun/p/9190818.html

时间： 2024-11-08 21:47:57

学生管理系统网页版的相关文章

jsp数据库增删改查——简单的图书管理系统网页版

登录(指定登录号密码的简单判断): 1 <%@ page language="java" import="java.sql.*" pageEncoding="gb2312"%> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

python开发的学生管理系统

python开发的学生管理系统(基础版) #定义一个函数,显示可以使用的功能列表给用户 def showInfo(): print("-"*30) print(" 学生管理系统 ") print(" 1.添加学生的信息") print(" 2.删除学生的信息") print(" 3.修改学生的信息") print(" 4.查询学生的信息") print(" 5.遍历所有学生的信

学生管理系统利用网页较为成熟的优化。。。

基础的web页面 1 <?xml version="1.0" encoding="ISO-8859-1"?> 2 3 <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" 4 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 5 xsi:schemaLocation="http://xmlns

学生信息管理系统JAVASE版--1.1.1

现在终于可以写出实用一点的程序了.虽然这个程序的功能非常之简陋,而且还有BUG.不过最起码已经可以使用了. 功能预览和下一步的目标 程序主界面 查询功能: 目前只做了一个表的增.删.改.查.下一步应该就是把功能完善,比如加入错误处理,比如加入成绩部分.完成一个班级内的学生信息管理的功能,应该具有学生的基本信息查询,成绩管理这两个功能 不过有一个问题就是,在表格更新这一部分,每更新一次,就要创建一个tabliModel对象,感觉可以改进.再有就是MVC模式,其实也就接触设计模式.还有就是整成那种可

石家庄铁道大学软件工程系学生学籍管理系统2019版

//信1805-1 戴伟伟 20183773package dww; import java.util.Scanner; class ScoreInformation { private String stunumber; private String name; private double mathematicsscore; private double englishscore; private double networkscore; private double databasesco

Golang项目之函数版学生管理系统

前言 学习第3天,基于函数的方式编写小项目:学生管理系统 代码 package main import ( "fmt" "os" ) /* 函数版学生管理系统 写一个系统能够查看所有的学生/新增学生/删除学生 */ var ( allStudent map[int64]*student // 变量声明 ) type student struct{ id int64 name string } // newStudent是一个student类型的构造函数 func n

函数调用实例：学生管理系统（前面的优化版），可以弹出窗口。

1 package classwork308; 2 /* 3 * 学生管理系统 4 */ 5 import javax.swing.JOptionPane; 6 7 public class Method_StudentManage { 8 9 /*****管理账号*****/ 10 public static String[] manager={"a","b"}; 11 /*****管理密码*****/ 12 public static int [] passwo

ORM版，学生管理系统02

学生管理系统 urls.py url(r'^student_list/$',views.student_list,name="student_list"), url(r'^delete_student/(?P<sid>\d+)/$',views.delete_student,name="delete_student"), url(r'^add_student/',views.add_student,name="add_student"

Golang项目之结构体版学生管理系统

前言 学习第4天,基于结构体的方式对函数版本重构编写小项目:学生管理系统 代码 package main import ( "fmt" "os" ) // 菜单系统(将菜单系统封装到函数中) func showMenu(){ fmt.Println("欢迎光临学生管理系统") fmt.Println(` 1.查看所有学生 2.新增学生 3.删除学生 4.退出 `) } // 造一个存储学生数据的类型 type student struct{ id