ttrs
2019獨角獸企業重金招聘Python工程師標準>>>
<%@ page language="java" contentType="text/html; charset=utf-8"
? ? pageEncoding="utf-8"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<!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-1.9.1.js"></script>
<link href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/list.js"></script>
<style type="text/css">
? #table1 td{width: 100px;}
</style>
</head>
<body>
<center>
? <table>
? ? ?<tr>
? ? ? ? <td>
? ? ? ? ? ?<div id="tabs" style="width: 450px;">
? ? ? ? ? ? ?<ul>
? ? ? ? ? ? ? ?<li><a href="#tabs-1">商品列表</a></li>
? ? ? ? ? ? ?</ul>
? ? ? ? ? ? ? <div id="tabs-1">
? ? ? ? ? ? ? ? ?<s:iterator value="#request.prolist" var="pro">
? ? ? ? ? ? ? ? ? ? <table style="text-align:center; display:inline;">
? ? ? ? ? ? ? ? ? ? ? ?<tr><td>
? ? ? ? ? ? ? ? ? ? ? ? ? <input type="hidden" value='${pro.proId }'>
? ? ? ? ? ? ? ? ? ? ? ? ? <img src="img/${pro.proImg}" width="120px" height="120px">
? ? ? ? ? ? ? ? ? ? ? ?</td></tr>
? ? ? ? ? ? ? ? ? ? ? ?<tr><td>${pro.proName}</td></tr>
? ? ? ? ? ? ? ? ? ? ? ?<tr><td>￥${pro.proPrice}</td></tr>
? ? ? ? ? ? ? ? ? ? </table>
? ? ? ? ? ? ? ? ?</s:iterator>
? ? ? ? ? ? ? </div>
? ? ? ? ? ?</div>
? ? ? ? </td>
? ? ? ? <td valign="top">
? ? ? ? ? <div style="border: 1px solid black;width:200px;height:420px;padding: 10px;">
? ? ? ? ? ? <div style="text-align: left"><b>我的購物車</b></div>
? ? ? ? ? ? <div id="cartDiv" style="height: 376px;margin-top: 10px;">
? ? ? ? ? ? ? <table id="table1" cellpadding="0" cellspacing="0">
? ? ? ? ? ? ? ? <s:iterator value="#session.cart.products" var="pro" status="i">
? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? <td style='width:10px;'>${i.count}、</td>
? ? ? ? ? ? ? ? ? <td style='width:80px;text-align: left'>${pro.proName }</td>
? ? ? ? ? ? ? ? ? <td style='width:50px;'>${pro.bycount }</td>
? ? ? ? ? ? ? ? ? <td><a href="javascript:void(0)" οnclick="deletepro(this,${pro.proId})">刪除</a></td>
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ?</s:iterator>
? ? ? ? ? ? ? </table>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div style="text-align:right;"><a href="showCart.jsp">查看購物車</a></div>
? ? ? ? ? </div>
? ? ? ? </td>
? ? ?</tr>
? </table>
</center>
</body>
</html>
$(function(){
$("#tabs").tabs();
$("#tabs-1 table").draggable({
helper:"clone",
opacity:0.5
});
$("#cartDiv").droppable({
drop:function(enver,ui){
var id=ui.draggable.find("td:eq(0) input").val();
var name=ui.draggable.find("td:eq(1)").html();
? ? ? ? ? ? var bool=false;
$("#cartDiv tr").each(
function(index,lement)
{
if($(lement).find("td:eq(1)").html()==name){
bool=true;
}
});
if(bool){
$("#cartDiv tr").each(function(index,lement){
if($(lement).find("td:eq(1)").html()==name){
var td=$(this).find("td:eq(2)");
td.html(parseInt(td.html())+1);
}
});
}else{
var html="<tr><td style='width:10px;'>"+($("#cartDiv tr").size()+1)+"、</td>";
? ?html+="<td style='width:80px;text-align: left'>"+name+"</td>";
? ?html+="<td style='width:50px;'>1</td>";
? ?html+="<td><a href='#' οnclick='deletepro(this,"+id+")'>刪除</a></td>";
? ?html+="</tr>";
? ? $("#cartDiv table").append(html);
}
$.post("product!add","proId="+id);
}
});
});
function deletepro(elment,proid)
{?
alert(proid+'remove'+elment);
if(parseInt($(elment).parent().prev().html())>1){
var td=$(elment).parent().prev();
td.html(parseInt(td.html())-1);
}else{
$(elment).parent().parent().remove();
}
$.post("product!remove","proId="+proid);
}
轉載于:https://my.oschina.net/u/1042750/blog/188148
總結
- 上一篇： Javascript面向对象编程（二）
- 下一篇： ngCloak 实现 Angular 初