如何利用Visual Studio Code实现增删改查

<!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>姓名:&nbsp;&nbsp;&nbsp;&nbsp;
        <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>性别:&nbsp;&nbsp;&nbsp;&nbsp;
        <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>年龄:&nbsp;&nbsp;&nbsp;&nbsp;
        <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>班级:&nbsp;&nbsp;&nbsp;&nbsp;
        <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>学号:&nbsp;&nbsp;&nbsp;&nbsp;
        <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>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值