HTML与JavaScript组员信息管理-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44109821/article/details/103632823
在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组员昵称</title>
	</head>
	<body>
		<label for="">请输入组员昵称：</label><input type="text" id="txtname" value="" /><br />
		<label for="">请输入组员年龄：</label><input type="text" id="txtage" value="" /><br />
		<button onclick="add()">添加组员</button><button onclick="showmsg()">显示组员信息</button>
		<div id="msg">
			
		</div>
		
		<script type="text/javascript">
		var members=[]//用于存放用书输入的内容---存的是一个一个对象
			//使用工厂模式创建对象
			function CreateMember(name,age)
			{
				var member=new Object();
				member.name=name;
				member.age=age
				return member
			}
			
			//第一个按钮里面的内容
			function add()
			{
				var txtname=document.getElementById("txtname");
				var txtage=document.getElementById("txtage")
				//不为空，不为数字，不重复
                if(txtname.value==""||txtage.value=="")
                {
                	alert("输入内容不为空")
                	return
                }
                if(isNaN(txtage.value))
                {
                	alert("年龄不为数字")
                	return
                }
                for(var i in members)
                {
//              	console.log(i)//---数组中的索引mA、
                    if(txtname.value==members[i].name)
                    {
                    	alert("昵称重复")
                    	return
                    }
                }
                
                
				var member1=CreateMember(txtname.value,txtage.value)
				members.push(member1)
				alert("组员昵称添加成功,当前已经有"+members.length+"个成员")
			}
		    //定义一个函数--第二个按钮内的所有的功能--打印信息内容，当没有添加内容的时候弹框
		    function showmsg()
		    {
		    	//当没有添加内容的时候弹框
		    	if(members.length==0)
		    	{
		    		alert("您没有添加成员")
		    		return
		    	}
		    	//添加排序内容  age
		    	
		    	//打印信息内容--添加一个表格进去
		    	var msg=document.getElementById("msg")
		    	var membertable="组员列表如下：<table><tr>"
		    	//添加表头--对象的属性名   从数组中的第一个对象拿属性名 members[0]
		    	for (var i in members[0])
		    	{
//		    		i//属性名--每循环一次把对象中的属性名赋值给i
                    //把属性名添加到表头
                    membertable+="<th>"+i+"</th>"
		    	}
		    	membertable+="</tr>"
		    	//添加属性值
		    	for (var i=0;i<members.length;i++)
		    	{
		    		membertable+="<tr>"
//		    		i--索引 members[i]对象--对象中的值--循环对象
		    		var m=members[i];//m代表的是数组中的每个对象
		    		for (var j in m)//每循环一次把m中的属性名（name，age）赋值给j，那么属性值就是m[j]
		    		{
		    			membertable+="<td>"+m[j]+"</td>"
		    		}
		    		membertable+="</tr>"
		    	}
		    	membertable+="</table>"
		    	msg.innerHTML=membertable
		    }
		</script>
	</body>
</html>
添加组员昵称
