PHP 结合 Boostrap 结合 js 实现学生列表删除编辑以及搜索功能（完结）
这个自己的小项目要先告一段落了。可能还有许多bug。请见谅
删除学生功能
PHP:
// 这里是通过前端代码HTML中的 url 传过来的，用 $_GET 来获取(相关HTML代码可以看一下到主页看一下前几条博客)
if (empty($_GET['num'])) exit('<h1>找不到您要删除的学生的学号</h1>'); $num = $_GET['num']; $connection = mysqli_connect('localhost', 'root', '密码', 'students_info_system'); if (!$connection) exit('<h1>连接数据库失败</h1>'); $query = mysqli_query($connection, "delete from students where num = {$num}"); if (!$query) exit('<h1>该学生信息查询失败</h1>'); // 注意：这里传入的是连接对象
$affected_rows = mysqli_affected_rows($connection); if ($affected_rows !== 1) exit('<h1>删除失败</h1>'); header('Location: student_info.php');
编辑学生功能(整体上和添加学生功能差不到，稍微有些许变化)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编辑学生</title>
<link rel="stylesheet" type="text/css" href="css/Bootstrap.css">
</head>
<body>
<div class="container mt-3">
<h1 class="display-5 text-center">编辑学生</h1>
<?php if (isset($error_msg)): ?>
<div class="alert alert-danger"><?php echo $error_msg; ?></div>
<?php endif ?>
<div class="row mt-3">
<img src="<?php echo $current_student['photo']; ?>" alt="<?php echo $current_student['name']; ?>" width="100" height="488" class="col-sm-6">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>?id=<?php echo $current_num; ?>" method="post" enctype="multipart/form-data" autocomplete="off" class="col-sm-6">
<div class="form-group">
<input type="number" name="num" class="form-control" placeholder="学号" value="<?php echo isset($_POST['num']) ? $_POST['num'] : $current_student['num']; ?>">
</div>
<div class="form-group">
<select class="form-control" name="system">
<option>请选择学院/系</option>
<option <?php echo $current_student['system'] === '电气工程学院' ? 'selected' : ''; ?>>电气工程学院</option>
<option <?php echo $current_student['system'] === '信息工程与艺术学院' ? 'selected' : ''; ?>>信息工程与艺术学院</option>
<option <?php echo $current_student['system'] === '国际教育学院' ? 'selected' : ''; ?>>国际教育学院</option>
<option <?php echo $current_student['system'] === '水利水电工程学院' ? 'selected' : ''; ?>>水利水电工程学院</option>
<option <?php echo $current_student['system'] === '测绘与市政工程学院' ? 'selected' : ''; ?>>测绘与市政工程学院</option>
<option <?php echo $current_student['system'] === '马克思主义学院' ? 'selected' : ''; ?>>马克思主义学院</option>
<option <?php echo $current_student['system'] === '建筑工程学院' ? 'selected' : ''; ?>>建筑工程学院</option>
<option <?php echo $current_student['system'] === '经济与管理学院' ? 'selected' : ''; ?>>经济与管理学院</option>
</select>
</div>
<div class="form-group">
<input type="text" name="class" class="form-control" placeholder="班级" value="<?php echo isset($_POST['class']) ? $_POST['class'] : $current_student['class']; ?>">
</div>
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="姓名" value="<?php echo isset($_POST['name']) ? $_POST['name'] : $current_student['name']; ?>">
</div>
<div class="form-group">
<select class="form-control" name="gender">
<option value="-1">请选择性别</option>
<option <?php echo $current_student['gender'] === '1' ? 'selected' : ''; ?> value="1">男</option>
<option <?php echo $current_student['gender'] === '0' ? 'selected' : ''; ?> value="0">女</option>
</select>
</div>
<div class="form-group">
<label for="birthday">出生日期</label>
<input type="date" name="birthday" class="form-control" id="birthday" value="<?php echo isset($_POST['birthday']) ? $_POST['birthday'] : $current_student['birthday']; ?>">
</div>
<div class="form-group">
<label for="photo">照片</label>
<input type="file" name="photo" class="form-control">
</div>
<button type="submit" class="btn btn-info btn-block">确认修改</button>
</form>
</div>
</div>
</body>
</html>
PHP:
if (empty($_GET['id'])) exit('<h1>必须指定相应的学号</h1>');
$current_num = $_GET['id'];
$connection = mysqli_connect('localhost', 'root', '密码', 'students_info_system');
if (!$connection) exit('<h1>连接数据库失败</h1>');
$query = mysqli_query($connection, "select * from students where num = {$current_num} limit 1");
if (!$query) exit('<h1>找不到您要编辑的学生信息</h1>');
$current_student = mysqli_fetch_assoc($query);
// var_dump($current_student);
function edit_student() {
// var_dump('进来了');
global $connection;
global $current_num; // 当前学生学号
global $current_student;
$extra_students_query = mysqli_query($connection, "select * from students where num != {$current_num}");
if (!$extra_students_query) {
exit('<h1>其余学生数据查询失败</h1>');
// return;
}
// 查询除该学生以外的其他学生
while ($student = mysqli_fetch_assoc($extra_students_query)) {
// var_dump($student);
$students_num[] = $student['num'];
}
// var_dump($students_num);
// var_dump($_FILES['photo']);
// var_dump($_POST['gender']);
if (empty($_POST['num'])) {
$GLOBALS['error_msg'] = '请输入学号';
return;
}
// 判断该学号是否已经被添加(即列表中已存在该学生)=========
if (in_array($_POST['num'], $students_num)) {
$GLOBALS['error_msg'] = '该学生已存在';
return;
}
if (empty($_POST['system']) || $_POST['system'] === '请选择学院/系') {
$GLOBALS['error_msg'] = '请选择学院/系';
return;
}
if (empty($_POST['class'])) {
$GLOBALS['error_msg'] = '请输入班级';
return;
}
if (empty($_POST['name'])) {
$GLOBALS['error_msg'] = '请输入姓名';
return;
}
if (!(isset($_POST['gender']) && $_POST['gender'] !== '-1')) {
$GLOBALS['error_msg'] = '请选择性别';
return;
}
if (empty($_POST['birthday'])) {
$GLOBALS['error_msg'] = '请输入出生日期';
return;
}
// 以下处理文件域=======================================================
// 当有文件上传时才验证，没有上传则照片不变
// $_FILES['photo'] = $current_student['photo'];
// var_dump($_FILES['photo']);
if ($_FILES['photo']['name'] !== '') {
// var_dump($_FILES['photo']);
// var_dump($_FILES['photo']);
if ($_FILES['photo']['error'] !== UPLOAD_ERR_OK) {
$GLOBALS['error_msg'] = '上传照片失败';
return;
}
// 验证上传文件的类型(只允许图片)
if (strpos($_FILES['photo']['type'], 'image/') !== 0) {
$GLOBALS['error_msg'] = '这不是支持的文件格式类型，请重新上传';
return;
}
// 文件上传到了服务端开辟的一个临时地址，需要转移到本地
$image_target = 'images/' . $_FILES['photo']['name'];
if (!move_uploaded_file($_FILES['photo']['tmp_name'], $image_target)) {
$GLOBALS['error_msg'] = '图片上传失败';
return;
}
// 接收更新过的学生照片
$current_student['photo'] = (string)$image_target;
} else {
// var_dump($_FILES['photo']);
// 如果照片没有上传则不进行验证文件域,直接更新数据且不改变原来的照片
$current_student['num'] = $_POST['num'];
$current_student['system'] = $_POST['system'];
$current_student['class'] = $_POST['class'];
$current_student['name'] = $_POST['name'];
$current_student['gender'] = $_POST['gender'];
$current_student['birthday'] = $_POST['birthday'];
}
// var_dump($current_num);
// 将数据修改存放到数据库
$update_query = mysqli_query($connection, "update students set `num` = '{$current_student['num']}', `system` = '{$current_student['system']}', `class` = '{$current_student['class']}', `name` = '{$current_student['name']}', `gender` = '{$current_student['gender']}', `birthday` = '{$current_student['birthday']}', `photo` = '{$current_student['photo']}' where `num` = {$current_num}");
if (!$update_query) {
$GLOBALS['error_msg'] = '更新数据查询失败';
return;
}
$affected_rows = mysqli_affected_rows($connection);
if ($affected_rows !== 1) {
$GLOBALS['error_msg'] = '修改失败';
return;
}
// 延迟2秒
time_sleep_until(time() + 2);
header('Location: student_info.php');
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
edit_student();
}
搜索功能（用js）
// 关键词搜索功能----立即函数
(function (element, search_key) { let table = document.getElementById('table-content'); // 获取表格 function in_array_item (item, array) {
for (var i = 0; i < array.length; i++) {
if (array[i].indexOf(item) != -1) {
return true;
}
}
return false;
} function response () {
let hiddenStudentsNumber = 0; // 获取隐藏的学生个数(即表格隐藏行数) // 获取要搜索的关键词
const search_content = document.getElementById(search_key).value;
// console.log(search_content);
// console.log(typeof(search_content)); let data = [];
// 遍历列表将数据存储到一个数组中
// 1.获取表格行数
for (let i = 0; i < table.children.length; i++) {
// 2.获取表格列数
for (let j = 0; j < table.children[i].children.length; j++) {
if (!data[i]) {
// 在数组中创键每一行内容存放的数组，用于存放一行数据
data[i] = new Array();
}
data[i][j] = table.children[i].children[j].innerHTML.toString();
// 3.存放数据
if (data[i][j] === '♂') {
data[i][j] = '男';
}
if (data[i][j] === '♀') {
data[i][j] = '女';
}
}
// console.log(data[i]);
if (search_content == '') {
table.children[i].style.display = '';
} else {
if (in_array_item(search_content, data[i])) {
table.children[i].style.display = '';
} else {
table.children[i].style.display = 'none';
hiddenStudentsNumber += 1;
}
}
}
console.log(hiddenStudentsNumber);
let str = "共有" + (table.children.length - hiddenStudentsNumber) + "名学生";
document.getElementById('students_number').innerHTML = str;
} const searchButton = document.getElementById(element);
searchButton.addEventListener('click', function () {
response();
}); document.addEventListener('keydown', function (event) {
if (event.keyCode === 13) {
response();
}
}); let str = "共有" + table.children.length + "名学生";
document.getElementById('students_number').innerHTML = str;
})('search', 'search-key');
同时在原有的学生信息页面HTML添加：
<div class="row mt-3">
<a class="btn btn-info col-sm-2" style="margin-right: 28px; margin-left: 15px;" href="add_student.php">添加学生</a>
// 添加的
<button class="btn btn-info align-middle" id="students_number"></button>
<input type="text" class="form-control col-sm-6 ml-2" autocomplete="on" placeholder="请输入关键词" value="" id="search-key">
<button type="submit" class="btn btn-info col-sm-2 ml-2" id="search">点击搜索</button>
</div>
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑以及搜索功能（完结）的更多相关文章
- JS：操作样式表2 :用JS实现添加和删除一个类名的功能（addClass()和removeClass()）
var box = document.getElementById("box"); box.id = "pox"; 将id = “box”,改为id = “po ...
- Vue和Element基础使用,综合案例学生列表实现
知识点梳理 课堂讲义 1.Vue 快速入门 1.1.Vue的介绍 Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的A ...
- 原生js移动端列表无缝间歇向上滚动
在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
- 05StuList.aspx(学生列表)
05StuList.aspx 加载学生列表(前天代码) <%@ Page Language="C#" AutoEventWireup="true" Co ...
- js 验证ip列表
如题. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- PHP 结合 Bootstrap 实现学生列表以及添加学生功能实现（继上篇登录及注册功能之后）
本人是一位学生,正在学习当中,可能BUG众多,请见谅并指正,谢谢!!! 学生列表实现 HTML: <!DOCTYPE html> <html> <head> < ...
- MVC学生管理系统-阶段I（显示学生列表）
项目源码 :https://download.csdn.net/download/weixin_44718300/11091042 目录 MVC设计模式 前期准备: NO01:新建一个index.js ...
- 给destoon商城的列表中和首页添加购物车功能
如何给destoon商城的列表中和首页添加购物车功能? 目前加入购物车的功能只存在商城的详细页面里,有时候我们需要批量购买的时候,希望在列表页就能够使用这个加入购物车的功能. 修改步骤见下: 例如在商 ...
随机推荐
- linux df 日志删除命令分析
在部署文件的时候 发现 文件太多了,需要删除: 使用命令行df -h; [sankuai@set-gh-qcs-regulation-wanganbu-test01 com.sankuai.qcs.r ...
- 2019_软工实践_Beta（4/5）
队名:955 组长博客:点这里! 作业博客:点这里! 组员情况 组员1(组长):庄锡荣 过去两天完成了哪些任务 文字/口头描述 ? 测试新功能中 展示GitHub当日代码/文档签入记录 接下来的计划 ...
- 使用良好的自定义X264编码，取得极佳质量！《转》
原帖地址:http://www.xspliter.com/forum.php?mod=viewthread&tid=447 一般直播时使用A设定即可.你尝试设置并找出你最满意的设定 A为最需最 ...
- jmeter cookie管理器
jmeter cookie管理器 不能用正则表达式获取登录接口生成的cookie 因为cookies并不是在登录的响应结果中生成的,而是在response header中携带的,所以不能用正则表达式提 ...
- WebGL学习笔记（七）：输入和动画
目前为止,我们绘制出来的3D物体都是静止的,接下来我们需要让桌面上的小盒子可以根据我们按键(上下键)前进后退: 输入方面,监听按键和鼠标消息直接在document上添加对应的监听就行了: 动画这块,我 ...
- [ Docker ] 基础概念
目录- 什么是容器- 虚拟化和容器技术- docker 的基本概念 1. 什么是容器 容器英文:Container,容器是一种基础工具:泛指任何可以用于容纳其他物品的工具,可以部分或者完全封闭,被用于 ...
- exports module.exports export export default之间的关系
exports 和module.exports是CommonJS模块规范 export export default是ES6模块的规范,两者完全是不同的概念. node应用由模块组成,采用的是Comm ...
- [LeetCode] 160. Intersection of Two Linked Lists 求两个链表的交集
Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...
- idea创建maven web项目需要注意的一些细节
在idea中构建maven java web项目,从new project到选择maven骨架到最后finish完成,整个流程完成后,项目基本结构已经出来,但是距一个可以正常开发运行的web项目还有一 ...
- vscode插件Power Mode
Power Mode官网 设置里添加 "powermode.enabled": true, "powermode.presets": "flames& ...