动态组装餐品展示

来源：互联网发布：linux jdk1.7 gz 安装编辑：程序博客网时间：2024/05/03 11:16
<%@ 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写一起，
自己做的时候快而已，看起来特别费劲,。
阅读全文
0 0