学生信息管理系统 - 学生信息表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生信息管理系统 - 学生信息表单</title>
</head>
<body>
<!-- 内容标题 -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">学生信息管理</h1>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- 中间内容 -->
<section class="content">
<div class="container-fluid">
<div class="row" style="margin-bottom: 10px">
<div class="col-1">
<button style="color: red" id="btnAdd" type="button" class="btn btn-block bg-gradient-primary">添加</button>
</div>
<div class="col-1">
<button style="color: #0a001f" id="btnDel" type="button" class="btn btn-block bg-gradient-primary">删除</button>
</div>
<div class="col-1">
<button style="color: cyan" id="btnEdit" type="button" class="btn btn-block bg-gradient-primary">修改</button>
</div>
<div class="col-1">
<button style="color: #4c0ab8" id="btnSelectAll" type="button" class="btn btn-block bg-gradient-primary">查询</button>
</div>
</div>
<pre><code> <div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<label class="text-left">学生学号：</label>
<input type="text" class="form-control my-input" placeholder="请输入学号">
<button id="btnSelectName" type="button" class="btn bg-gradient-primary">查询</button>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
<input type="checkbox">
</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>专业</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
</td>
<th>20002</th>
<th>夏玲</th>
<th>女</th>
<th>17</th>
<th>医药医学</th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<th>20003</th>
<th>泳婵</th>
<th>女</th>
<th>19</th>
<th>医药医学</th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<th>20004</th>
<th>谢玉婵</th>
<th>女</th>
<th>19</th>
<th>医药医学</th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<th>20005</th>
<th>林杭灵</th>
<th>女</th>
<th>19</th>
<th>医药医学</th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<th>20006</th>
<th>夏雪</th>
<th>女</th>
<th>20</th>
<th>医药医学</th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<th>20007</th>
<th>冬雨</th>
<th>女</th>
<th>18</th>
<th>医药医学</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</code></pre>
</section>
<!--保存弹出框-->
<div class="modal fade" data-tag="add" id="modalSave" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">学生添加</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group row">
<label class="col-2 col-form-label text-left">学号：</label>
<label class="col-2 col-form-label text-left">姓名：</label>
<label class="col-2 col-form-label text-left">性别：</label>
<label class="col-2 col-form-label text-left">年龄：</label>
<label class="col-2 col-form-label text-left">专业：</label>
<div class="col-6">
<input type="text" class="form-control" placeholder="请输入学号">
<input type="text" class="form-control" placeholder="请输入姓名">
<input type="text" class="form-control" placeholder="请输入性别">
<input type="text" class="form-control" placeholder="请输入年龄">
<input type="text" class="form-control" placeholder="请输入专业">
</div>
</div>
</form>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script>
/*
需要在页面加载完毕后执行window.onload
jquery简化window.onload=$( function () {} );
-- 原版
window.onload=function () {
};*/
$(function () {
//页面执行完后，开始执行
$("#btnAdd").click(function () {
<pre><code> //设置自定义属性data-tag的值为add
$("#modalSave").data("tag","add");
//window.alert("OK");
$("#modalSave").modal({
keyboard:true,
show:true
});
});
$("#btnEdit").click(function () {
//设置自定义属性data-tag的值为edit
$("#modalSave").data("tag","edit");
$("#modalSave").modal({
keyboard:true,
show:true
});
});
//模态框事件,show执行完毕之后立即处理的事件
$("#modalSave").on("show.bs.modal",function () {
//window.alert($("#modalSave").data("tag"));
switch ($("#modalSave").data("tag")) {
case "add":
$("#modalSave .modal-header h4").text("学生添加");
break;
case "edit":
$("#modalSave .modal-header h4").text("学生修改");
break;
}
});
});
</code></pre>
</script>
</body>
</html>
<script>
</script>
原文地址: https://www.cveoy.top/t/topic/joli 著作权归作者所有。请勿转载和采集!