使用jQuery+Bootstrap优化人员信息管理系统Version2.0

最新推荐文章于 2023-06-20 10:54:00 发布
原创
最新推荐文章于 2023-06-20 10:54:00 发布 · 997 阅读
5 ·
CC 4.0 BY-SA版权
文章标签：
#js #html #javascript
一、项目概述

项目名称 : 人员信息管理系统
项目需求 : 使用jQuery+Bootstrap对人员信息管理系统进行优化
项目展示：
二、项目实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>人员管理系统</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 定义人员JSON
			var person1 = {
    
    
				"personno": "1",
				"personname": "张三",
				"personsex": "男",
				"personage": 20,
				"personfrom": "北京"
			};
			var person2 = {
    
    
				"personno": "2",
				"personname": "李四",
				"personsex": "男",
				"personage": 23,
				"personfrom": "上海"
			};
			
			// 定义JSON数组
			var persons = new Array;
			persons.push(person1, person2);
			
			// 建立索引,用于自动编号
			var index = 2;
			
			// 显示表单
			function showAddForm() {
    
    
				$("#addform").show();
			}
			// 隐藏表单
			function hiddenAddForm() {
    
    
				$("#addform").hide();
			}
			function hiddenUpdateForm(){
    
    
				$("#updateform").hide();
			}
			
			// 展示表格信息
			function showTable() {
    
    
				// 根据id获取表格
				// var maintable = document.getElementById("maintable");
				var $maintable = $("#maintable");
				var str = "<tr class='info'><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>操作</th></tr>";
				for (var i = 0; i < persons.length; i++) {
    
    
					// 拼接人员信息
					str += "<tr><td>" + persons[i].personno + "</td><td>" + persons[i].personname + "</td><td>" + persons[i].personsex +
						"</td><td>" +
						persons[i].personage + "</td><td>" + persons[i].personfrom +
						"</td><td><button class='btn btn-danger' οnclick='deletePersonInfo(" + persons[i].personno +
						");'>删除</button> <button class='btn btn-warning' οnclick='showUpdateForm(" + persons[i].personno + ");'>更新</button></td></tr>";
				}
				// 将拼接好的字符串添加到表格中
				// maintable.innerHTML = str;
				$maintable.html(str);
			
				$maintable.show();
			}
			
			// 添加人员信息
			function addPersonInfo() {
    
    
				// 根据id获取添加表单
				// var addform = document.getElementById("addform");
				var $addform = $("#addform");
				// 每次使用了索引就需要自增
				var addno = ++index;
				// var addname = addform.personname.value;
				var addname = $("#personname").val();
				// var addage = addform.personage.value;
				var addage = $("#personage").val();
				// var addsex = addform.personsex.value;
				var addsex = $("#personsex").val();
				// var addfrom = addform.personfrom.value;
				var addfrom = $("#personfrom").val();
				// 用临时JSON对象保存信息
				var person = {
    
    
					"personno": addno,
					"personname": addname,
					"personsex": addsex,
					"personage": addage,
					"personfrom": addfrom
				};
				// 将JSON添加到数组
				persons.push(person);
				// 刷新一下，展示人员信息
				showTable();
				alert("添加成功！")
				$addform.hide();
			}
			
			// 删除人员信息
			function deletePersonInfo(no) {
    
    
				var res = confirm("确定要删除编号为" + no + "的记录嘛？")
				if (res) {
    
    
					// 找到要删除的元素进行删除
					for (var i = 0; i < persons.length; i++) {
    
    
						if (persons[i].personno == no) {
    
    
							delete persons[i];
							break;
						}
					}
					// [1] [2] [3] 删除第2个元素
					// [1] null [3] 这里有一个空值，因此personno接不到值,需要去空值
					// 删除后需要去null值
					// 方法一：替换法
					var arr = new Array; // 新建一个数组
					for (var i = 0; i < persons.length; i++) {
    
    
						if (persons[i] != null) {
    
    
							arr.push(persons[i]); // 将非空数组添加到新数组
						}
					}
					persons = arr; // 把新数组的值替换给老数组
			
					/*
							// 方法二：splice(素组下标,个数，添加的值1，值2，...)方法
					 		for (var i = 0; i < persons.length; i++) {
								if (persons[i] == '' || persons[i] == null || typeof(persons[i]) == undefined) {
									// splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
									persons.splice(i, 1);
									i = i - 1;
								}
							}
					 */
					// 刷新一下表格
					showTable();
				}
			}
			
			// 回显表单数据
			function showUpdateForm(no) {
    
    
				// 找到要更新的数据
				for (var i = 0; i < persons.length; i++) {
    
    
					if (persons[i].personno == no) {
    
    
						// 将获取到的数据回显到表单
						// document.getElementById("updatepersonno").value = persons[i].personno;
						$("#updatepersonno").val(persons[i].personno);
						// document.getElementById("updatepersonname").value = persons[i].personname;
						$("#updatepersonname").val(persons[i].personname);
						// document.getElementById("updatepersonage").value = persons[i].personage;
						$("#updatepersonage").val(persons[i].personage);
						// document.getElementById("updatepersonsex").value = persons[i].personsex;
						$("#updatepersonsex").val(persons[i].personsex);
						// document.getElementById("updatepersonfrom").value = persons[i].personfrom;
						$("#updatepersonfrom").val(persons[i].personfrom);
			
						// 显示updateform表单
						// document.getElementById("updateform").style.display = "";
						$("#updateform").show();
					}
				}
			}
			
			// 更新人员信息