<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="box">
<!-- 班级,时间,查询,重置 -->
<div class="box1">
<!-- 班级查询 -->
<!-- <div class="bjmc">
班级名称: <input type="text" placeholder="请输入班级名称" id="bj">
</div> -->
<!-- 时间查询 -->
<div class="sjcx">
查询内容: <input type="text" placeholder="姓名/学号/手机号/班级" id="sj">
</div>
<!-- 查询 -->
<div class="cx" onclick="cxxx()">查询</div>
<!-- 重置 -->
<div class="cz" onclick="czz()">重置</div>
</div>
<!-- 新增 -->
<div class="xz" onclick="func2()">+ 新增</div>
<!-- 表单 -->
<table id="taa">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>班级</th>
<th>学号</th>
<th>手机号</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</table>
<!-- 新增 -->
<div class="bjxz">
<!-- 1.------------------------------------- -->
<div style="font-size: 15px;font-weight: 550;margin: 40px 20px 0 20px;"><span
style="color: red;">*</span>姓名:
<input type="text"
style="width: 260px;height: 40px;border-radius: 4px;border: 1px solid #e2e2e2;font-weight: 550;color: #6f706f;"
id="srxm" onblur="sqjd(event,0)" onfocus="hqjd(event,0)">
</div>
<span class="ts1">姓名不能为空</span>
<!-- 2.------------------------------------- -->
<div style="font-size: 15px;font-weight: 550;margin: 10px 20px 0 20px;"><span
style="color: red;">*</span>性别:
<select
style="width: 260px;height: 40px;border-radius: 4px;border: 1px solid #e2e2e2;font-weight: 550;color: #6f706f;"
id="srxb">
<option selected="selected" disabled="disabled" style='display: none' value=''></option>
<option style="width: 260px;height: 40px;border-radius: 4px;font-weight: 550;color: #6f706f;">男</option>
<option style="width: 260px;height: 40px;border-radius: 4px;font-weight: 550;color: #6f706f;">女</option>
</select>
</div>
<!-- 3.------------------------------------- -->
<div style="font-size: 15px;font-weight: 550;margin: 10px 20px 0 20px;"><span
style="color: red;">*</span>年龄:
<input type="number"
style="width: 260px;height: 40px;border-radius: 4px;border: 1px solid #e2e2e2;font-weight: 550;color: #6f706f;"
id="srnl" onblur="sqjd(event,1)" onfocus="hqjd(event,1)">
</div>
<span class="ts2">年龄不能为空</span>
<!-- 4.------------------------------------- -->
<div style="font-size: 15px;font-weight: 550;margin: 10px 20px 0 20px;"><span
style="color: red;">*</span>班级:
<input type="text"
style="width: 260px;height: 40px;border-radius: 4px;border: 1px solid #e2e2e2;font-weight: 550;color: #6f706f;"
id="srbj" onblur="sqjd(event,2)" onfocus="hqjd(event,2)">
</div>
<span class="ts3">班级不能为空</span>
<!-- 5.------------------------------------- -->
<div style="font-size: 15px;font-weight: 550;margin: 10px 20px 0 20px;"><span
style="color: red;">*</span>学号:
<input type="number"
style="width: 260px;height: 40px;border-radius: 4px;border: 1px solid #e2e2e2;font-weight: 550;color: #6f706f;"
id="srxh" onblur="sqjd(event,3)" onfocus="hqjd(event,3)">
</div>
<span class="ts4">学号不能为空</span>
<!-- 6.------------------------------------- -->
<div style="font-size: 15px;font-weight: 550;margin: 10px 20px 0 20px;"><span style="color: red;">*</span>手机号:
<input type="number"
style="width: 260px;height: 40px;border-radius: 4px;border: 1px solid #e2e2e2;font-weight: 550;color: #6f706f;"
id="srsjh" onblur="sqjd(event,4)" onfocus="hqjd(event,4)">
</div>
<span class="ts5">手机号不能为空</span>
<div class="boxxz">
<!-- 取消 -->
<div class="xzqx" onclick="func1()">取消</div>
<!-- 确定 -->
<div class="xzqd" onclick="func3()">确定</div>
<div class="xzqd1" onclick="eathIndex()">确定</div>
</div>
<!-- x号 -->
<div class="xzx" onclick="func1()">x</div>
</div>
</div>
<!-- 灰色蒙层 -->
<div class="hsmc" onclick="func1()"></div>
</body>
<script src="../../es6/jquery-1.8.3.js"></script>
<script src="./index.js"></script>
</html>
如何利用Visual Studio Code实现增删改查
最新推荐文章于 2024-03-06 01:26:43 发布