图书管理系统二维数组或对象

最新推荐文章于 2022-11-30 14:51:43 发布

神奇大叔

最新推荐文章于 2022-11-30 14:51:43 发布

阅读量446

点赞数

分类专栏：网页制作案例

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103225738

版权

网页制作案例专栏收录该内容

41 篇文章 3 订阅

订阅专栏

<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<p align="center">
			<span>书名</span><input type="text" id="userName" />
			<span>作者</span><input type="text" id="userAuthor" />
			<span>价格</span><input type="text" id="userPrice" />
			<span>数量</span><input type="text" id="userCount" />
			
		</p>
		<p align='center'>
			<button id="add">添加</button>
			<button id="query">查询</button>
		</p>
		<hr />
		<div id="showMessage"></div>
		
		<script type="text/javascript">
			    var userNameInput = document.getElementById('userName');
			    var userAuthorInput = document.getElementById('userAuthor');
			    var userPriceInput = document.getElementById('userPrice');
			    var userCountInput = document.getElementById('userCount');
			    var addBtn = document.getElementById('add');
			    var queryBtn = document.getElementById('query');
			    var showDiv = document.getElementById('showMessage');
			    //1.5准备二维数组 用于承载数据
			    var bookArr = [];
			    //2.给button添加点击事件
			    //2.1添加按钮
			    addBtn.onclick = function () {
			        //2.10获取元素内容
			        var userName = userNameInput.value;
			        var userAuthor = userAuthorInput.value;
			        var userPrice = userPriceInput.value;
			        var userCount = userCountInput.value;
			        //2.11对元素内容判断
			        if (userName.trim().length == 0 || userAuthor.trim().length == 0 || userCount.trim().length == 0 || userPrice
			                        .trim().length == 0) {
			            //2.12元素内容不完整
			            alert('数据不完整请您将数据补充完整');
			        }else{
			        	/*var arr=[];  使用数组
			        	arr.push(userName);
			        	arr.push(userAuthor);
			        	arr.push(userPrice);
			        	arr.push(userCount);*/
			        	
			        	/*使用对象*/
			        	var obj={};
			        	obj.userName=userName;
			        	obj.userAuthor=userAuthor;
			        	obj.userPrice=userPrice;
			        	obj.userCount=userCount;
			        	
			        /*	bookArr.push(arr); 二维数组*/
			       
			        	bookArr.push(obj);
			        	
			        	userAuthorInput.value="";
			        	userCountInput.value="";
			        	userPriceInput.value="";
			        	userNameInput.value="";
			        	
			        	console.log(bookArr);
			        }
			                        
			    }
				
				queryBtn.onclick=function()
				{
					if(bookArr.length==0)
					{
						alert("无数据");
					}else{
						var str="<table border='1' cellspacing='0px' width='600px' align='center' style='text-align:center;'>"+
								"<tr><td>书名</td><td>作者</td><td>价格</td><td>数量</td></tr>";
						
				/*使用数组		for(var i=0;i<bookArr.length;i++)
						{
							str+="<tr><td>"+bookArr[i][0]+"</td><td>"+bookArr[i][1]+"</td><td>"+bookArr[i][2]+"</td><td>"+bookArr[i][3]+"</td></tr>";
							
							
						}*/
						
								for(var i=0;i<bookArr.length;i++)
						{
							str+="<tr><td>"+bookArr[i].userName+"</td><td>"+bookArr[i].userAuthor+"</td><td>"+bookArr[i].userPrice+"</td><td>"+bookArr[i].userCount+"</td></tr>";
							
							
						}
						
						str+="</table>";
						showDiv.innerHTML=str;
					}
				}
			
		</script>
	</body>
</html>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图书管理系统二维数组或对象

<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p align="center"> <span>书名</span><input type="text" id=...
复制链接

扫一扫