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

╰半橙微兮° 2021-07-24 20:22 230阅读 0赞

<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>