HTML+JavaScript+CSS的人员信息管理系统
2024-06-03 08:29:41
一、项目概述
1. 项目名称 : 人员信息管理系统
2. 项目需求 : 利用现有技术对人员信息进行可视化管理
3. 项目概述 :
假设需要对某行业人员信息进行管理,该行业人员信息数据样本如下
| 编号 | 姓名 | 性别 | 年龄 | 籍贯 |
| 1 | 科比 | 男 | 41 | 美国洛杉矶 |
| 2 | 乔丹 | 男 | 56 | 美国纽约 |
现因为人员管理较为复杂所以需要你使用HTML+CSS+JS技术完成对现有人员的
查询、 添加 、删除 、修改 的数据管理
二、代码详情（可用浏览器直接运行）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>人员信息管理系统</title><script type="text/javascript">var index = 1;var p1 = {"id":index,"name":"科比","sex":"男","old":41,"area":"美国洛杉矶",};index++;var p2 = {"id":index,"name":"乔丹","sex":"男","old":56,"area":"美国纽约",};index++;var p = new Array();//var p = [];p.push(p1);p.push(p2);/**显示人员信息**/function showPerson(){//显示表格var table1 = document.getElementById("table1");table1.style = "";var str = "<tr> <th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th colspan='2'>操作</th> </tr>";for(var i=0;i<p.length;i++){var a = p[i];str += "<tr> <td>"+a.id+"</td><td>"+a.name+"</td><td>"+a.sex+"</td><td>"+a.old+"</td><td>"+a.area+"</td><td><button type='button' onclick='deletePerson("+a.id+")'>删除</button></td><td><button type='button' onclick='showUpdatePerson("+a.id+")'>更新</button></td> </tr>";}table1.innerHTML = str;}/**显示新增人员信息**/function showAddPerson(){//隐藏更新人员界面var div3 = document.getElementById("div3");div3.style = "display: none;";var div2 = document.getElementById("div2");div2.style = ""; }/**新增人员信息**/function addPerson(){var field2 = document.getElementById("field2");var a = {};//var a = new Array();// var a = p[index-1];a.id = index;a.name = document.getElementById("name").value;a.old = document.getElementById("old").value;a.sex = document.getElementById("sex").value;a.area = document.getElementById("area").value;// alert(a.id+" "+a.name+" "+a.old+" "+a.sex+" "+a.area +" ");index++;//数组添加表单的值p.push(a);//添加之后重新查询表单showPerson();}/**取消按钮，隐藏表单**/function cancel(){//隐藏新增人员信息界面var div2 = document.getElementById("div2");div2.style = "display: none;";//隐藏更新人员信息界面var div3 = document.getElementById("div3");div3.style = "display: none;";}/**根据id删除人员信息**/function deletePerson(id){var flag = confirm("确定删除？");if(flag){for(var i=0;i<p.length;i++){var a = p[i];if(a.id == id){p.splice(i,1);//从第i个位置开始删除一个元素}}}//删除完毕重新加载表单showPerson();}/**根据id修改人员信息**/function showUpdatePerson(id){//隐藏添加人员界面var div2 = document.getElementById("div2");div2.style = "display: none;";//显示更新人员界面var div3 = document.getElementById("div3");div3.style = "";//根据id遍历数组得到要修改的值,然后用document对象进行修改for(var i=0;i<p.length;i++){var a = p[i];if(a.id == id){document.getElementById("uname").value = a.name;document.getElementById("uold").value = a.old;document.getElementById("usex").value = a.sex;document.getElementById("uarea").value = a.area;document.getElementById("uid").value = a.id;}}}function updatePerson(){var id = document.getElementById("uid").value;//再根据id把表单中的value值存入对于的p[]i数组中for(var i=0;i<p.length;i++){var a = p[i];if(a.id == id){p[i].name = document.getElementById("uname").value;p[i].old = document.getElementById("uold").value;p[i].sex = document.getElementById("usex").value;p[i].area = document.getElementById("uarea").value;}}//重新调用表单刷新showPerson();//隐藏添加人员界面var div3 = document.getElementById("div3");div3.style = "display: none;";}</script></head><body><button type="button" onclick="showPerson()">显示人员信息</button><button type="button" onclick="showAddPerson()">新增人员信息</button><hr ><!-- 表格信息 --><div id="div1"><table border="1" style="display: none;" id="table1"cellspacing="2" cellpadding="2"><!-- <tr> <th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th colspan="2">操作</th> </tr><tr> <td>v.编号</td><td>v.姓名</td><td>v.性别</td><td>v.年龄</td><td>v.籍贯</td><td><button type="button" onclick="">删除</button></td><td><button type="button">更新</button></td> </tr>--></table></div><!-- 新增人员信息 --><div id="div2" style="display: none;"><fieldset id="field2"><legend>新增人员信息</legend><input type="hidden" name="id" id="uid"/>姓名：<input type="text" name="name" id="name" value="艾佛森" /><br>年龄：<input type="number" name="old" id="old" value="44" /><br>性别：<select id="sex" required="required"><option value ="">--请选择--</option><option value ="男" selected="selected">男</option><option value ="女">女</option></select><br>籍贯：<input type="text" name="area" id="area" value="弗吉尼亚州汉普顿" /><br><button type="button" onclick="addPerson()">确定</button><button type="button" onclick="cancel()">取消</button></fieldset></div><!-- 更新人员信息 --><div id="div3" style="display: none;" name="div3"><fieldset id="field3"><legend>更新人员信息</legend>姓名：<input type="text" name="name" id="uname"/><br>年龄：<input type="number" name="old" id="uold"/><br>性别：<select id="usex" required="required"><option value ="">--请选择--</option><option value ="男" >男</option><option value ="女">女</option></select><br>籍贯：<input type="text" name="area" id="uarea" /><br><button type="button" onclick="updatePerson()">确定</button><button type="button" onclick="cancel()">取消</button></fieldset></div></body>
</html>
三、运行效果
四、bootstrap优化版
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><!-- 为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。 --><meta name="viewport" content="width=device-width, initial-scale=1"><title>人员信息管理系统</title><!-- 新 Bootstrap 核心 CSS 文件 --><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script type="text/javascript">var index = 1;var p1 = {"id":index,"name":"科比","sex":"男","old":41,"area":"美国洛杉矶",};index++;var p2 = {"id":index,"name":"乔丹","sex":"男","old":56,"area":"美国纽约",};index++;var p = new Array();//var p = [];p.push(p1);p.push(p2);/**显示人员信息**/function showPerson(){//显示表格var table1 = document.getElementById("table1");table1.style = "margin: 1.25rem;";var str = "<tr> <th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>操作</th> </tr>";for(var i=0;i<p.length;i++){var a = p[i];str += "<tr> <td>"+a.id+"</td><td>"+a.name+"</td><td>"+a.sex+"</td><td>"+a.old+"</td><td>"+a.area+"</td><td><button type='button' class='btn btn-success' onclick='showUpdatePerson("+a.id+")'>更新</button> <button type='button' class='btn btn-danger' onclick='deletePerson("+a.id+")'>删除</button> </td> </tr>";}table1.innerHTML = str;}/**显示新增人员信息**/function showAddPerson(){//隐藏更新人员界面var div3 = document.getElementById("div3");div3.style = "display: none;";var div2 = document.getElementById("div2");div2.style = "margin: 2.25rem;"; }/**新增人员信息**/function addPerson(){var field2 = document.getElementById("field2");var a = {};//var a = new Array();// var a = p[index-1];a.id = index;a.name = document.getElementById("name").value;a.old = document.getElementById("old").value;a.sex = document.getElementById("sex").value;a.area = document.getElementById("area").value;// alert(a.id+" "+a.name+" "+a.old+" "+a.sex+" "+a.area +" ");index++;//数组添加表单的值p.push(a);//添加之后重新查询表单showPerson();}/**取消按钮，隐藏表单**/function cancel(){//隐藏新增人员信息界面var div2 = document.getElementById("div2");div2.style = "display: none;";//隐藏更新人员信息界面var div3 = document.getElementById("div3");div3.style = "display: none;";}/**根据id删除人员信息**/function deletePerson(id){var flag = confirm("确定删除？");if(flag){for(var i=0;i<p.length;i++){var a = p[i];if(a.id == id){p.splice(i,1);//从第i个位置开始删除一个元素}}}//删除完毕重新加载表单showPerson();}/**根据id修改人员信息**/function showUpdatePerson(id){//隐藏添加人员界面var div2 = document.getElementById("div2");div2.style = "display: none;";//显示更新人员界面var div3 = document.getElementById("div3");div3.style = "margin: 2.25rem";//根据id遍历数组得到要修改的值,然后用document对象进行修改for(var i=0;i<p.length;i++){var a = p[i];if(a.id == id){document.getElementById("uname").value = a.name;document.getElementById("uold").value = a.old;document.getElementById("usex").value = a.sex;document.getElementById("uarea").value = a.area;document.getElementById("uid").value = a.id;}}}function updatePerson(){var id = document.getElementById("uid").value;//再根据id把表单中的value值存入对于的p[]i数组中for(var i=0;i<p.length;i++){var a = p[i];if(a.id == id){p[i].name = document.getElementById("uname").value;p[i].old = document.getElementById("uold").value;p[i].sex = document.getElementById("usex").value;p[i].area = document.getElementById("uarea").value;}}//重新调用表单刷新showPerson();//隐藏添加人员界面var div3 = document.getElementById("div3");div3.style = "display: none;";}</script></head><body><div id="" style="margin: 1.25rem;"><button type="button" class="btn btn-info" onclick="showPerson()"><span class="glyphicon glyphicon-qrcode"></span> 显示人员信息</button><button type="button" class="btn btn-info" onclick="showAddPerson()"><span class="glyphicon glyphicon-sound-stereo"></span> 新增人员信息</button></div><!-- 表格信息 --><div id="div1" style="margin: 1.25rem;"><table border="1" class="table table-hover" style="display: none;" id="table1" cellspacing="2" cellpadding="2"><!-- <tr> <th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th colspan="2">操作</th> </tr><tr> <td>v.编号</td><td>v.姓名</td><td>v.性别</td><td>v.年龄</td><td>v.籍贯</td><td><button type="button" onclick="">删除</button></td><td><button type="button">更新</button></td> </tr>--></table></div><!-- 新增人员信息 --><div id="div2" style="display: none;margin: 1.25rem;"><fieldset id="field2"><legend>新增人员信息</legend><table class="table table-hover"><input type="hidden" class="form-control" name="id" id="uid"/><tr><td>姓名:</td><td><input type="text" class="form-control" name="name" id="name" value="艾佛森" /></td></tr> <tr><td>年龄：</td><td><input type="number" class="form-control" name="old" id="old" value="44" /></td></tr><tr><td>性别：</td><td><select id="sex" class="form-control" required="required"><option value ="">--请选择--</option><option value ="男" selected="selected">男</option><option value ="女">女</option></select></td></tr><tr><td>籍贯：</td><td><input type="text" class="form-control" name="area" id="area" value="弗吉尼亚州汉普顿" /></td></tr><tr><td><button type="button" class="btn btn-primary" onclick="addPerson()">确定</button><button type="button" class="btn btn-warning" onclick="cancel()">取消</button></td></tr></table></fieldset></div><!-- 更新人员信息 --><div id="div3" style="display: none;margin: 1.25rem;" name="div3"><fieldset id="field3"><legend>更新人员信息</legend><table class="table table-hover"><tr><td>姓名：</td><td><input type="text" class="form-control" name="name" id="uname"/></td></tr><tr><td>年龄：</td><td><input type="number" class="form-control" name="old" id="uold"/></td></tr><tr><td>性别：</td><td><select id="usex" class="form-control" required="required"><option value ="">--请选择--</option><option value ="男" >男</option><option value ="女">女</option></select></td></tr><tr><td>籍贯：</td><td><input type="text" class="form-control" name="area" id="uarea" /></td></tr><tr><td><button type="button" class="btn btn-success" onclick="updatePerson()">确定</button><button type="button" class="btn btn-warning" onclick="cancel()">取消</button></td></tr></table></fieldset></div></body>
</html>
五、运行效果
HTML+JavaScript+CSS的人员信息管理系统相关推荐
- Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码前后端交互+SSM框架 管理员登录 游客登录 普通用户登录 人员的增删改查 信息更新 图片上传 分页查询）
Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码(前后端交互+SSM框架 管理员登录 游客登录 普通用户登录 人员的增删改查 信息更新 图片上传 分页查询 修改密 ...
- html增加状态信息管理代码,JavaScript+HTML实现学生信息管理系统
一.前言 用数组来存储所有学生对象的信息,实现了双向更新,初始时(数组内的对象信息"填充界面"),后面的界面操作可以更新数组内对象的信息(数量和本身数据域信息). 优点:JQuer ...
- html5学生信息注册码,JavaScript+HTML实现学生信息管理系统代码示例
本篇文章小编给大家分享一下JavaScript+HTML实现学生信息管理系统代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 一.前言 用数组来 ...
- 人员信息管理系统练习
/* 项目 人员信息管理系统练习 最多10个人 把信息保存到文件中去 */ #include <stdio.h> #include <string.h> int save() ...
- c++ 简易人员信息管理系统
一.内容 编写一个人员信息管理系统. 这个系统的功能是:交互式的实现校园人员信息的录入与显示. 二.类分析 学校里,主要有四类人员:大学本科学生.教师.研究生和助教. 大学本科生每周有固定的学时数.教 ...
- java高校人员信息管理系统
高校人员信息管理系统 1.数据模型 教师.实验员.行政人员.教师兼行政人员 共有属性:编号.姓名.性别.出生年月 教师:所在系部.专业.职称 实验员:所在实验室.职称 行政人员:政治面貌.职务 pac ...
- 基于Java的人员信息管理系统
基于Java的人员信息管理系统 介绍 实现类(Person) 实现类(Menu) 实现类(Input) 实现类(Operator) 实现类(Test) 结果展示: 操作环境以及信息 介绍 利用Java ...
- 高校人员信息管理系统（Python版）
目录 高校人员信息管理系统 一.问题描述 二.功能要求 三.问题的解决方案 四.运行环境说明 五.代码段 1.多文件 (1)员工类(文件1) (2)教师类(文件2) (3)实验员类(文件3) (4)行 ...
- 高校人员信息管理系统（C++版）
目录 高校人员信息管理系统 一.问题描述 二.功能要求 三.问题的解决方案 四.代码段 1.多文件 2.单文件 高校人员信息管理系统 ...
- C++小型公司人员信息管理系统（多态）
C++小型公司人员信息管理系统(多态) 1.实验题目及要求 已有应用为: 某公司包含多种员工类型:技术员,产品经理,销售员.销售经理. 技术员 (包含工号(6位 :000001~ 999999).姓名 ...
最新文章
- 微软推出Windows XP/Server 2003紧急安全补丁：修复远程桌面CVE-2019-0708漏洞
- ylb：子查询（嵌套子查询）和子查询（相关子查询）
- tensorflow学习（6.Alexnet实现及猫狗分类）
- 分辨率到底是个什么概念？它和DPI之间是什么关系？
- WinCE5.0 SMDK2410 BSP在GEC2410开发板上的移植(11)-BINFS在Nand上的实现(Multi-Bin的实现)
- 单片机模数转换实验c语言程序,单片机实验AD转换实验
- 分享一个串口调试工具
- 【编译原理笔记09】语法制导翻译：语法制导翻译方案，在非递归的预测分析过程中进行翻译
- 盗版牢骚？ or 学而不思？
- Java--第2天--Html（二）
- oracle10g_database安装教程,Oracle Database 10g数据库安装及配置教程
- 【HAVENT原创】Mac 下编译 ReactNative(CRN) 踩坑记录
- 纯靠成绩毫无科研的保研历程（电子信息工程专业）
- 【C语言】（用函数实现）请给小学生随机出10道加减法的练习题，要求：10以内的加减法，并且能批改。
- github博客自动同步到gitee（保姆级教程）
- 【js课设】电子画板01
- 什么事长连接 短连接
- 光电编码器与计算机连接模块,计算机-谈述编码器基于增量光电编码器的车速制约器设计论文结论-优度********网...
- 矩阵的等价，相似，合同
- ffmpeg.dll丢失怎么办-ffmpeg.dll修复工具下载