master

分支 (1)

管理

管理

master

studentManagementSystem
/
index.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">
    <link rel="shortcut icon" href="./img/logo.ico" type="image/x-icon">
    <title>JQuery学生管理系统</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- logo部分 -->
    <div class="head">
        <img src="./img/logo.png" alt="渡一教育">
        <h1>江信学院</h1>
    </div>

    <!-- 左边部分 -->
    <div class="left">
        <h2>学生管理</h2>
        <ul>
            <li class="active" id="studentList">学生列表</li>
            <li id="addStudent">新增学生</li>
        </ul>
    </div>

    <!-- 右边部分 -->
    <div class="right">

        <!-- 学生列表部分 -->
        <div class="active">
            <!-- 搜索区域 -->
            <div class="searchArea">
                <select name="serach" id="">
                <option value="id">学号</option>
                <option value="name">姓名</option>
                <option value="sex">性别</option>
            </select>
                <input type="text" placeholder="请输入要搜索的内容">
                <button class="btnBg1" id="searchBtn">搜索</button>
                <button class="btnBg2" id="backBtn">返回</button>
            </div>
            <!-- 新增按钮区域 -->
            <div class="addArea">
                <button class="btnBg1" id="randomAdd">随机新增</button>
                <button class="btnBg2" id="customAdd">自定义新增</button>
            </div>
            <!-- 学生表格 -->
            <div class="studentTable">

            </div>
            <!-- 分页区域 -->
            <div class="page"></div>
        </div>

        <!-- 新增学生部分 -->
        <div class="">
            <form id="addForm">
                <div>
                    <label for="name">姓名</label>
                    <input type="text" placeholder="请输入学生姓名" id="name" name="name">
                    <span class="valiData" id="valiDataName"></span>
                </div>
                <div>
                    <label>性别</label>
                    <span>男<input type="radio" id="male" name="sex"  value='男' checked></span>
                    <span>女<input type="radio" id="female" name="sex" value='女' ></span>
                </div>
                <div>
                    <label for="email">邮箱</label>
                    <input type="text" placeholder="请输入邮箱地址" id="email" name="email">
                    <span class="valiData" id="valiDataEmail"></span>
                </div>
                <div>
                    <label for="age">年龄</label>
                    <input type="text" placeholder="请输入学生年龄" id="age" name="age">
                    <span class="valiData" id="valiDataAge"></span>
                </div>
                <div>
                    <label for="tel">手机号</label>
                    <input type="text" placeholder="请输入学生手机号" id="tel" name="tel">
                    <span class="valiData" id="valiDataTel"></span>
                </div>
                <div>
                    <label for="address">住址</label>
                    <input type="text" placeholder="请输入学生住址" id="address" name="address">
                    <span class="valiData" id="valiDataAdd"></span>
                </div>
                <div>
                    <button class="btnBg1" id="submitBtn" type="button">提交</button>
                    <button class="btnBg2" id="returnBtn">返回</button>
                </div>
            </form>
        </div>
    </div>

    <script src="./page/js/jquery-3.6.0.js"></script>
    <script src="./page/js/page.js"></script>
    <script src="./js/mock.js"></script>
    <script src="./Api/myMock.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>