• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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" rel="external nofollow" >
    /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" rel="external nofollow" >添加学生/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 实现学生列表删除编辑及搜索功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

    您可能感兴趣的文章:
    • JavaScript中使用Substring删除字符串最后一个字符
    • javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
    • JS实现数组删除指定元素功能示例
    • JavaScript怎样在删除前添加确认弹出框?
    • 初学node.js中实现删除用户路由
    • 原生JS实现动态添加新元素、删除元素方法
    • JS删除String里某个字符的方法
    上一篇:thinkphp5框架API token身份验证功能示例
    下一篇:PHP写API输出的时用echo的原因详解
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能 PHP,结合,Boostrap,实现,学生,