JavaScript 人员搜索

最新推荐文章于 2024-07-07 23:14:19 发布

_(_^_)_

最新推荐文章于 2024-07-07 23:14:19 发布

阅读量102

点赞数

本文链接：https://blog.csdn.net/weixin_42916254/article/details/90041100

版权

JavaScript 人员搜索

人员信息用数组+json来存储
通过正则表达式来查询，可模糊查询

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>人员管理</title>
	<!--
			实现一个人员管理页面
		a.	查询条件：姓名，所属部门
		b.	数据列表：姓名，所属部门 ….
		c.	基础数据：自行定义
 	-->
 	<!-- date:2019/5/5 -->
</head>
<style type="text/css">
	input,select{
		box-sizing: border-box;
	}
	select,input{
		float: left;
		height: 21px;
	}
	#findList{
		clear: both;
	}
	.divList{
		background: pink;
		margin:10px 10px 0 0;
		padding: 15px;
		display: inline-block;
		transition: all 0.8s linear;
		border-radius: 10px;
		position: relative;
	}
	.divList:hover{
		cursor: pointer;
		background:rgba(0,0,0,0.8);
		color: pink;
	}
	span{
		position: absolute;
		right: 0;
		top: 0;
		display: inline-block;
		width: 16px;
		height: 16px;
		border-top-right-radius: 10px;
		text-align: center;
		background:rgb(243,134,140);
		color: black;
		font-size: small;
	}
</style>
<body>
	<h3>查询人员信息</h3>
	<form>
		<input type="text" name="" placeholder="请输入要查询的名称">
		<select id="person">
			<option selected="selected">--根据类型查询--</option>
			<option>姓名</option>
			<option>所属部门</option>
		</select>
		<input type="button" name="" value="查询" onclick="find()">
	</form>
	<div id="findList"></div>
</body>
<script type="text/javascript">
	var person=[{
		"id":"01",
		"name":"张某",
		"department":"业务一部"
	},{
		"id":"02",
		"name":"王某",
		"department":"业务一部"
	},{
		"id":"03",
		"name":"王某",
		"department":"业务二部"
	},{
		"id":"04",
		"name":"陈某",
		"department":"研发一组"
	},{
		"id":"05",
		"name":"李某",
		"department":"研发二组"
	}];

	function find(){
		var person=document.getElementById('person');
		//获取选择列表的下标
		var index=person.selectedIndex;
		if(index==0){
			alert("请选择您要查询的方式");
		}else if(index==1){
			findMethod("name");
		}else if(index==2){
			findMethod("department");
		}
	}
	//根据名字或所属部门来查询
	function findMethod(key){
		var findContent=document.querySelector("input[type=text]");
		var findList=document.getElementById("findList");
		var findListChild=findList.childNodes;
		for (var i = findListChild.length - 1; i >= 0; i--) {
			findList.removeChild(findListChild[i]);
		}		
		if(findContent.value==""){
			alert("请输入您想要查询的内容");
			return;
		}
		//正则表达式来判断，可以模糊查询
		var rep=new RegExp(findContent.value+"+","ig");
		//标记是否找到
		var isFind=false;
		for (var i = 0; i < person.length; i++) {
			//如果使用rep.test(person[i][key]))来判断，在判断一次之后指针会跑到字符串最后，出现判断失误
			if(person[i][key].match(rep)!=null){
				isFind=true;
				var divObj=document.createElement('div');
				divObj.className="divList";								
				for(var content in person[i]){
					divObj.innerHTML+=content+":"+person[i][content]+"<br>";
				}
				findList.appendChild(divObj);
			}
		}
		if(!isFind){
			if(confirm("很抱歉，没有找到您想要的，是否换其他关键字试一下？")){
				findContent.focus();
			}
		}
		addOrder();
	}
	//给查询到的结果添加序号
	function addOrder(){
		var findList=document.getElementById('findList');
		var findListChild=findList.getElementsByTagName('div'); 
		for (var i = 0; i < findListChild.length; i++) {
			var spanNum=document.createElement('span');
			spanNum.appendChild(document.createTextNode("1"));
			findListChild[i].insertBefore(spanNum,findListChild[i].firstChild);
		}
		resort();
	}
	function resort(){
		var findList=document.getElementById('findList');
		var spans=findList.getElementsByTagName('span');
		for (var i = 0; i < spans.length; i++) {
		 	spans[i].firstChild.nodeValue=i+1;
		 } 
	}
</script>
</html>

在这里插入图片描述