动态组装餐品展示

程序员文章站 2024-03-02 00:02:04

...

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>餐品页</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<link rel="stylesheet" type="text/css" href="css/show.css"/>
</head>
<body>
	<div class="include" id="include">
	<div class="banner">
		七天欢乐餐厅
	</div>
	<div class="banner_gwc">
		<img src="images/lcart_cn.gif" id="gwc_img" onclick="gwcClick()" />
	</div>
	<div class="lbanner">
		<img src="images/left_top.jpg" id="left_img"/>
	</div>
	<div class="list" id="list"></div>
	</div>
	<script type="text/javascript">
	//显示第一页
	$(function(){
		queryPage()
		function queryPage(){
			var _currpage=1;
			$.post('FoodSearchAction',{currpage:_currpage},function(data,status){
				if(status=='success'){
					//解析JSON数据(将JSON数据转为javascript对象)
					var obj=JSON.parse(data);
					//表头
					strHeader='<table  class="tab">';
					//组装DIV需要显示的数据的字符串
					var _table=strHeader+showTR(obj)+'</table>'+'<br/>'+showPage();
					//加入DIV中解析
					$("#list").append(_table);
					//鼠标经过摁扭的效果
					$(".pagebtn").mouseenter(function(){
						 $(this).css("background-color","#F0F8FF");
						 $(this).css("border-color","blue");
					});
					//鼠标离开摁扭的效果
					$(".pagebtn").mouseleave(function(){
						$(this).css("background-color","#FFFFFF");
						$(this).css("border-color","");
					});
				}
			})
		}
	});
	//点击哪页显示那页
	function queryPage(currpage){
		var _currpage=currpage;
		$.post('FoodSearchAction',{currpage:_currpage},function(data,status){
			if(status=='success'){
				//解析JSON数据(将JSON数据转为javascript对象)
				var obj=JSON.parse(data);
				//表头
				strHeader='<table  class="tab">';
				//组装DIV需要显示的数据的字符串
		var _table=strHeader+showTR(obj)+'</table>'+'<br/>'+showPage();
				$("#list").html("");
				//加入DIV中解析
				$("#list").append(_table);
				
				
			}
		})
	};
	//组装表格的行和列
	function showTR(data){
		var strTR='';
		for(var i=0;i<data.length;i=i+2){
			if(i<data.length-1){
				strTR+='<tr><td id="t_td"><img src="images/'+data[i].foodImage+'" align="left" class="img"/>'+data[i].foodName+'<br/>'+'<font color="red">'+'现价人民币:'+data[i].foodPrice+'元'+'</font><br/>'+data[i].description+'<br/><br/><br/>'+'编号:'+data[i].foodID+'<button id="btn1" onclick="sendTo('+i+')"><img src="images/buy_cn.gif"/></button>'+'<button id="btn2" ><img src="images/detail_cn.gif"/></button>'+'</td>'+
		           '<td id="t_td"><img src="images/'+data[i+1].foodImage+'" align="left" class="img"/>'+data[i+1].foodName+'<br/>'+'<font color="red">'+'现价人民币:'+data[i+1].foodPrice+'元'+'</font><br/>'+data[i+1].description+'<br/><br/><br/>'+'编号:'+data[i+1].foodID+'<button id="btn1" onclick="sendTo('+(i+1)+')"><img src="images/buy_cn.gif"/></button>'+'<button id="btn2"><img src="images/detail_cn.gif"/></button>'+'</td></tr>';	
			}
			
		}
	
		return strTR;
	};
	//组装分页
	function showPage(){
		var pageBtn='';
		var pageDiv='';
		for(var i=1;i<4;i++){
		pageBtn+='<div class="pagebtn" id="pagebtn" onclick="queryPage(this.innerHTML)">'+i+'</div>';
		}
		pageDiv='<div class="pagediv">'+pageBtn+'<div class="afterbtn">下一页></div></div>';
		return pageDiv;
	};  
	//点击购买摁扭时
	function sendTo(_id){
		$.post('shopCar.jsp',{id:_id},function(data,status){
			if(status=='success'){
				alert("已添加进购物车");
			}
		}) 
	}
	//点击查看购物车跳转到

	function gwcClick(){
		window.location.href='shopCar.jsp';
	} 
	</script>
</body>
</html>

总结：

像这种动态组装多数据的情况，代码看起来比较乱，

编辑的代码比较多。不要像我一样把CSS，JS写一起，

自己做的时候快而已，看起来特别费劲,。