JavaScript实现简单的学生管理系统实现增删改查

天的命名词

已于 2022-03-16 00:14:19 修改

阅读量1.1w

点赞数 11

文章标签： javascript css 前端 html5 css3

于 2022-03-15 23:56:07 首次发布

本文链接：https://blog.csdn.net/m0_67463447/article/details/123515633

版权

这是一个使用JavaScript实现的简单学生信息管理系统，具备增删改查功能。用户可以通过新增按钮添加学生信息，通过查看按钮查看详细信息，修改按钮来更新信息，而删除按钮则能移除选定的学生记录。系统界面包括表格展示、信息输入框和操作按钮，样式经过精心设计，交互友好。

摘要由CSDN通过智能技术生成

JavaScript实现简单的学生管理系统实现增删改查
**

效果图如下（代码放在下面）

总效果图
在这里插入图片描述

新增学生信息

在这里插入图片描述

查看学生信息

在这里插入图片描述
**

修改学生学生信息

** 在这里插入图片描述
**

代码部分

**
html部分

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="../css/style.css">

</head>

<body>
    <div class="bg"></div>
    <div class="W">
        <!-- 标题部分开始 -->
        <div class="title">
            <div class="border-line-left"></div>
            <h1 class="titleword">学生信息管理系统</h1>
            <div class="border-line-right"></div>
        </div>
        <!-- 标题部分结束 -->
        <!-- 新增删除按钮开始 -->
        <div class="chioce1">
            <button class="btn-add">新增</button>
            <button class="btn-del">删除</button>
        </div>
        <!-- 新增删除按钮结束 -->

        <!-- 主界面开始 -->
        <div class="Mainpage">

            <table class="mainpage">
                <!-- 主信息部分开始 -->
                <thead class="MessageBoard">
                    <tr>
                        <th><input type="checkbox" class="check-all"></th>
                        <th>序号</th>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>学院</th>
                        <th>专业</th>
                        <th>年级</th>
                        <th>班级</th>
                        <th>年龄</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <!-- 主信息部分结束 -->
                <tbody>
                </tbody>
            </table>


            <!-- 信息收集表开始 -->
            <div class="info">
                <!-- 表头部分开始 -->
                <div class="info-title">
                    <P class="info-title-p">新增学生信息</P>
                </div>
                <!-- 表头部分结束 -->

                <!-- 表格主体部分开始 -->
                <div class="info-main">
                    学号<input type="text"><br /><br />
                    姓名<input type="text"><br /><br />
                    学院<input type="text"><br /><br />
                    专业<input type="text"><br /><br />
                    年级<input type="text"><br /><br />
                    班级<input type="text"><br /><br />
                    年龄<input type="text">
                </div>
                <!-- 表格主体部分开始 -->
                <!-- 按钮开始 -->
                <div class="chioce3">
                    <button class="info-button-2">取消</button>
                    <button class="info-button-1">提交</button>
                </div>
                <!-- 按钮结束 -->

            </div>

            <!-- 查看信息表开始 -->
            <div class="check_info">
                <!-- 表头部分开始 -->
                <div class="check_info-title">
                    <P class="check_info-title-p">查看学生信息</P>
                </div>
                <!-- 表头部分结束 -->
                <!-- 主体部分开始 -->
                <div class="check_info-main">
                    学号<input type=