Ⅰ excel表格怎麼製作加入購物車的功能
alt+F11打開VBE編輯器，雙擊左側工程管理器thisworkbook標簽，粘貼以下代碼，如圖操作
Sub mm()
r = Sheets("sheet2").Range("c65536").End(xlUp).Row + 1
Selection.Copy Sheets("sheet2").Range("c" & r)
End Sub
Ⅱ 前端用js如何實現購物車功能，如圖那樣的效果
這是需要多個方法才能完成的
1，需要動態添加商品那一條顯示的function
2，個數那個需要一個增加減少的function
3， 需要個統計總數量的
4，需要一個檢測checkbox的
你做到什麼程度了
Ⅲ 如何用java和jsp做一個簡單的購物車
頁面jsp ：
<%@pagelanguage="java"contentType="text/html;charset=utf-8"
pageEncoding="utf-8"%>
<%@taglibprefix="c"uri="
<%@tagliburi="
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
<htmlxmlns="
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>易買網-首頁</title>
<linktype="text/css"rel="stylesheet"href="${pageContext.request.contextPath}/css/style.css"/>
<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/jquery-2.1.1.js"></script>
<scripttype="text/javascript">
varcontextPath='${pageContext.request.contextPath}'
</script>
<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/shopping.js"></script>
</head>
<body>
<jsp:includepage="top.jsp"/>
<divid="position"class="wrap">
您現在的位置：<ahref="Home">易買網</a>>購物車
</div>
<divclass="wrap">
<divid="shopping">
<formaction=""method="post">
<table>
<tr>
<th>商品名稱</th>
<th>商品價格</th>
<th>購買數量</th>
<th>操作</th>
</tr>
<c:forEachitems="${sessionScope.shopCar}"var="item"varStatus="status">
<trid="proct_id_${item.proId}">
<tdclass="thumb"><imgsrc="${item.proImg}"height="50"width="30"/><ahref="Proct?action=view&entityId=${item.proId}">${item.proName}</a></td>
<tdclass="price"id="price_id_1">
<span><fmt:formatNumbervalue="${item.proPrice}"type="NUMBER"minFractionDigits="2"/></span>
<inputtype="hidden"value="${item.proPrice}"/>
</td>
<tdclass="number">
<dl>
<dt><spanonclick="sub('number_id_${item.proId}','${item.proId}')">－</span><inputid="number_id_${item.proId}"type="text"readonly="readonly"name="number"value="${item.proNum}"/><spanonclick="addNum('number_id_${item.proId}','${item.proId}')">＋</span></dt>
</dl>
</td>
<tdclass="delete"><ahref="javascript:deleteItem('proct_id_${item.proId}','${item.proId}')">刪除</a></td>
</tr>
</c:forEach>
</table>
<divclass="button"><inputtype="submit"value=""/></div>
</form>
</div>
</div>
<divid="footer">
Copyright&;kaka292817678itjob遠標培訓.
</div>
</body>
</html>
頁面關聯的js 自己去網上下載一個jquery
/*數量減少*/
functionsub(id,proId){
//購買數量的值
varnum=$('#'+id).val();
if(num>1){
$('#'+id).val(num-1);
}
edit(id,proId);
}
functionedit(id,proId){
varurl=contextPath+'/HomeCarManager'
//修改後的數量，購物明細的商品的id
num=$('#'+id).val();
$.post(url,{"num":num,"proId":proId},function(msg){
/*
if(msg=='true'){
alert('修改成功');
}else{
alert('修改失敗');
}*/
});
}
/**
*數量增加
*@param{}id
*/
functionaddNum(id,proId){
//購買數量的值
varnum=$('#'+id).val();
$('#'+id).val(parseInt(num)+1);
edit(id,proId);
}
/**
*刪除購物明細
*/
functiondeleteItem(trId,proId){
//
//console.log($("#"+trId));
//js刪除頁面節點
//$("#"+trId).remove();
varurl=contextPath+'/HomeCarManager'
$.post(url,{"proId":proId},function(msg){
if(msg=='true'){
//js刪除頁面節點
$("#"+trId).remove();
}
});
}
後台servlet1
packagecom.kaka.web;
importjava.io.IOException;
importjava.io.PrintWriter;
importjava.util.ArrayList;
importjava.util.List;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
/**
*購物車處理類
*@author@authorITJob遠標培訓
*
*/
importcom.kaka.entity.Items;
importcom.kaka.entity.Proct;
importcom.kaka.service.ProctService;
importcom.kaka.service.impl.ProctServiceImpl;
{
=1L;
ProctServiceps=newProctServiceImpl();
@Override
protectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{
//獲取商品的id
StringproId=req.getParameter("proId");
resp.setContentType("text/html;charset=UTF-8");
PrintWriterwriter=resp.getWriter();
if(null!=proId&&!"".equals(proId)){
//返回添加購物車成功
//System.out.println("============="+proId);
//根據商品的id查詢商品
try{
IntegerpId=Integer.parseInt(proId);
Proctproct=ps.findProctById(pId);
if(null!=proct){
//查詢到了商品，將商品的相關參數構建一個購物明細放入到購物車
Itemsit=newItems();
it.setProId(proct.getProId());
it.setProName(proct.getProName());
it.setProPrice(proct.getProPrice());
it.setProImg(proct.getProImg());
//先判斷session范圍是否有購物車
List<Items>shopCar=(List<Items>)req.getSession().getAttribute("shopCar");
if(null==shopCar){
//購物車
shopCar=newArrayList<Items>();
}
//將商品加入到購物車之前，判斷購物車中是否已經包含了該購物明細，如果包含了，只需要修改購買的數量
if(shopCar.contains(it)){
intindex=shopCar.indexOf(it);//尋找購物車中包含購物明細在購物車中位置
Itemsitems=shopCar.get(index);//獲取購物車中存在的購物明細
items.setProNum(items.getProNum()+1);
}else{
shopCar.add(it);
}
//將購物車放入到session訪問
req.getSession().setAttribute("shopCar",shopCar);
//返回
writer.print(true);
}else{
writer.print(false);
}
}catch(Exceptione){
e.printStackTrace();
writer.print(false);
}
}else{
writer.print(false);
}
writer.flush();
writer.close();
}
@Override
protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{
doPost(req,resp);
}
}
後台管理servlet
packagecom.kaka.web;
importjava.io.IOException;
importjava.io.PrintWriter;
importjava.util.ArrayList;
importjava.util.List;
importjavax.mail.FetchProfile.Item;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
/**
*購物車修改
*@authorITJob遠標培訓
*
*/
importcom.kaka.entity.Items;
importcom.kaka.entity.Proct;
importcom.kaka.service.ProctService;
importcom.kaka.service.impl.ProctServiceImpl;
{
=1L;
ProctServiceps=newProctServiceImpl();
@Override
protectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{
resp.setContentType("text/html;charset=UTF-8");
PrintWriterwriter=resp.getWriter();
//獲取參數
StringproId=req.getParameter("proId");
Stringnum=req.getParameter("num");
if(null!=proId&&null!=num
&&!"".equals(proId)&&!"".equals(num)){
try{
IntegerpId=Integer.parseInt(proId);
FloatpNum=Float.parseFloat(num);
//根據商品的id獲取對應的明細項
//先判斷session范圍是否有購物車
List<Items>shopCar=(List<Items>)req.getSession().getAttribute("shopCar");
for(Itemsit:shopCar){
if(it.getProId()==pId){
it.setProNum(pNum);
}
}
writer.print(true);
}catch(Exceptione){
e.printStackTrace();
}
}else{
//刪除的操作
try{
IntegerpId=Integer.parseInt(proId);
//根據商品的id獲取對應的明細項
//先判斷session范圍是否有購物車
List<Items>shopCar=(List<Items>)req.getSession().getAttribute("shopCar");
Itemsitems=null;
for(Itemsit:shopCar){
if(it.getProId()==pId){
items=it;
break;
}
}
if(null!=items){
shopCar.remove(items);
req.getSession().setAttribute("shopCar",shopCar);
}
writer.print(true);
}catch(Exceptione){
e.printStackTrace();
}
}
writer.flush();
writer.close();
}
@Override
protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{
doPost(req,resp);
}
}
Ⅳ ASP做一個簡單的購物車
可以去中國站長站看看，裡面的源代碼很多的。不過我希望你在網上找一個一個簡單的源代碼，然後模仿著寫一寫，否則學不到東西啊。
Ⅳ 前端開發中前端開發購物車怎麼做
效果前端可以實現，數據需要後台，可以看演示代碼，我頭像有。
Ⅵ web前端購物車功能實現
其實思路都是很簡單的，如果你要純前端的實現，那用Javascript或者jquery就可以做了，如果想前後端聯動，那麼具體數據操作你就提交到後台，然後後台重新返回頁面就可以了
Ⅶ 用html做一個購物車，能實現簡單的產品數量和價格的加減就行。最後能計算出提交物品價格的總和。
html中的購物車的增減不能直接傳送到後台，可以通過ajax，在js中發送ajax
純前端的話可以參考下面的
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>cart</title>
<styletype="text/css">
body,p,a,input{
margin:0;
padding:0;
font-size:12px;
}
.container{
width:100%;
}
.main{
width:1000px;
height:500px;
margin:100pxauto;
}
.main.cart-containertable{
width:100%;}
.main.cart-containertabletr{
text-align:center;
}
.main.cart-containertabletr:hover{
background:rgba(128,128,128,0.2);
}
.main.cart-containertable.table-header{
height:30px;
background:#d9d9d9;
font-size:1.2em;
}
.main.cart-containertable.table-headertd:first-child{
border-left:solid4pxred;
box-sizing:border-box;
}
.main.cart-containertabletrtd:nth-child(1),
.main.cart-containertabletrtd:nth-child(2){
text-align:left;
}
.main.cart-containertabletrtd:nth-child(2){
width:52%;
}
.main.cart-containertabletrtd:nth-child(3){
width:12%;
}
.main.cart-containertabletrtd:nth-child(4){
width:12%;
}
.main.cart-containertabletrtd:nth-child(5){
width:12%;
}
.main.cart-containertabletrtd:last-child{
width:10%;
}
.cart-good{
height:60px;
}
.cart-goodimg{
float:left;
margin:10px;
width:60px;
}
.cart-goodtdp{
margin:10px0px;
}
/*加、減按鈕*/
.cart-goodtdinput[type='button']{
width:20px;
height:20px;
background:#00f300;
outline:none;
border:none;
}
.cart-goodtdinput[type='button']:disabled{
background:grey;
}
.cart-goodtdinput[type='button']:first-child{
margin-right:-4px;
}
.cart-goodtdinput[type='button']:last-child{
margin-left:-4px;
}
.cart-goodtdinput[type='text']{
width:30px;
height:20px;
outline:none;
border:none;
text-align:center;
}
.table-footer{
display:flex;
justify-content:space-between;
line-height:40px;
}
.table-footerdiv{
font-size:1.2em;
}
.table-footerdivbutton{
background:red;
width:120px;
height:40px;
color:white;
}
</style>
</head>
<body>
<divclass="container">
<header></header>
<sectionclass="main">
<divclass="cart-container">
<tablecellspacing="0">
<trclass="table-header">
<td><inputtype="checkbox"id="chk_alla"></td>
<td>聚美優品發貨</td>
<td>聚美價</td>
<td>數量</td>
<td>小計</td>
<td>操作</td>
</tr>
<!--<trclass="cart-good">-->
<!--<td><inputtype="checkbox"id="001"></td>-->
<!--<td>-->
<!--<imgsrc="https://p2.jmstatic.com/proct/001/293/1293263_std/1293263_60_60.jpg"alt="">-->
<!--<p>[極速免稅]PITTAMASK口罩3枚入</p>-->
<!--<p>型號：新版防曬款容量：3枚入</p>-->
<!--</td>-->
<!--<td>89.00</td>-->
<!--<td>-->
<!--<inputtype="button"value="-">-->
<!--<inputtype="text"value="1">-->
<!--<inputtype="button"value="+">-->
<!--</td>-->
<!--<td>89.00</td>-->
<!--<td><ahref="#">刪除</a></td>-->
<!--</tr>-->
</table>
<divclass="table-footer">
<div>
<inputtype="checkbox"id="chk_allb"><labelfor="chk_allb">全選</label>
<spanstyle="margin-left:20px">繼續購物|清空選中商品</span>
</div>
<div>
共<spanid="good_count">5</span>件商品商品應付總額：<spanid="goods_total">¥229.00</span>
<buttonclass="btn_menu">去結算</button>
</div>
</div>
</div>
</section>
</div>
<script>
(function(){
varskin_procts=[
{
"id":"002",
"title":"EsteeLauder多效智妍精華霜15ml",
"img_url":"http://p0.jmstatic.com/proct/003/565/3565880_std/3565880_350_350.jpg",
"price":249.0,
"number":6,
"acount":"520",
"ischecked":true
},
{
"id":"004",
"title":"EsteeLauder肌透修護潔面乳30ml",
"img_url":"http://p4.jmstatic.com/proct/003/155/3155764_std/3155764_350_350.jpg",
"price":49.9,
"number":1,
"acount":"5911",
"ischecked":false
},
{
"id":"008",
"title":"雅詩蘭黛無痕持妝粉底液",
"img_url":"http://p3.jmstatic.com/proct/003/662/3662318_std/3662318_350_350.jpg",
"price":69.9,
"number":2,
"acount":"3972",
"ischecked":true
},
{
"id":"0012",
"title":"EsteeLauder肌初賦活原生液30ml",
"img_url":"http://p4.jmstatic.com/proct/003/565/3565914_std/3565914_350_350.jpg",
"price":159.0,
"number":1,
"acount":"2338"
},
{
"id":"001",
"title":"雅詩蘭黛無痕持妝粉底液30ml",
"img_url":"http://p2.jmstatic.com/proct/001/648/1648502_std/1648502_350_350.jpg",
"price":298.0,
"number":4,
"acount":"5071",
"ischecked":false
},
{
"id":"009",
"title":"雅詩蘭黛眼部精華霜15ml",
"img_url":"http://p1.jmstatic.com/proct/001/049/1049746_std/1049746_350_350.jpg",
"price":399.0,
"number":1,
"acount":"4022",
"ischecked":false
}
]
//添加商品
functionload(){
vartbody=document.querySelector('.cart-containertabletbody');
for(letgoodofskin_procts){
tbody.innerHTML+=`<trclass="cart-good"id="${good.id}">
<td><inputtype="checkbox"class="good-check"${good.ischecked?"checked":''}></td>
<td>
<imgsrc="${good.img_url}"alt="">
<p>[極速免稅]PITTAMASK口罩3枚入</p>
<p>型號：新版防曬款容量：3枚入</p>
</td>
<td>${good.price}</td>
<td>
<inputtype="button"value="-"${good.number<=1?"disabled":''}>
<inputtype="text"value="${good.number}">
<inputtype="button"value="+">
</td>
<td>${good.price*good.number}</td>
<td><ahref="#">刪除</a></td>
</tr>`
}
totalAcount();
}
load();
//endall..........
//1.為table注冊單擊事件
vartable01=document.querySelector('.cart-containertable');
table01.onclick=function(event){
varnode=event.target
if(node.getAttribute('type')=='button'){
//alert(event.target.value);
changeNumber(event);
subtotal(event);
checkedRow(event);
checkedAllRows();
}elseif(node.className=='good-check'){
checkedAllRows();
}elseif(node.id=='chk_alla'){
varf=event.target.checked;
varchks=document.querySelectorAll('.good-check');
for(varckofchks){
ck.checked=f;
}
for(vargoodofskin_procts){
good.ischecked=f;
}
}elseif(node.nodeName.toLowerCase()=='a'){
vartr=event.target.parentNode.parentNode;
for(vari=0;i<skin_procts.length;i++){
if(skin_procts[i].id==tr.id){
skin_procts.splice(i,1);
console.log(skin_procts);
}
}
tr.parentNode.removeChild(tr);
}
totalAcount();
};
//單擊增加或減少按鈕的方法
functionchangeNumber(event){
varnode=event&&event.target;
varv=0;
if(node.value&&node.value=='+'){
//node.previousElementSibling.value=parseInt(node.previousElementSibling.value)+1;
node.previousElementSibling.value++;
v=node.previousElementSibling.value;
node.previousElementSibling.previousElementSibling.disabled=false;
}else{
//if(node.value&&node.value=='+')
if(node.nextElementSibling.value>1){
node.nextElementSibling.value--;
v=node.nextElementSibling.value;
if(v==1){
node.disabled=true;
}
}
}
//存儲商品數量
varid=node.parentNode.parentNode.id;
for(vargoodofskin_procts){
if(id==good.id){
good.number=v;
}
}
}
//每個商品小計的方法
functionsubtotal(event){
varnode=event&&event.target;
//varid=node.parentNode.parentNode.id;
//for(vargofskin_procts){
//if(g.id==id){
//alert(g.price);
//}
//}
//varprice=；
varprice=node.parentNode.previousElementSibling.innerText;
varnum=node.parentNode.children[1].value;
node.parentNode.nextElementSibling.innerText=(num*price).toFixed(2);
}
//檢驗該商品是否選中
functioncheckedRow(event){
event.target.parentNode.parentNode.firstElementChild.firstElementChild.checked=true;
//event.target.parentNode.parentNode.cells[0].firstElementChild.checked=true;
//vartbody=event.target.parentNode.parentNode.parentNode;
//event.target.parentNode.parentNode.parentNode.rows[3].cells[0].firstElementChild.checked=true;
}
//檢查是否全選
functioncheckedAllRows(){
varchks=document.querySelectorAll('.good-check');
varflag=true;
for(varckofchks){
if(!ck.checked){
flag=false;
break;
}
}
document.querySelector('#chk_alla').checked=flag;
}
//統計商品總量和總價格
functiontotalAcount(){
vartotal=0;
vartotal_price=0;
varchks=document.querySelectorAll('.good-check');
for(varckofchks){
if(ck.checked){
id=ck.parentNode.parentNode.id;
for(vargoodofskin_procts){
if(id==good.id){
total+=~~good.number;
total_price=total_price+(good.number*good.price);
good.ischecked=true;
}
}
}
}
document.querySelector('#good_count').innerText=total;
document.querySelector('#goods_total').innerText=total_price;
}
})();
</script>
</body>
</html>
Ⅷ java web 做購物車的大概思路，和實現步奏是什麼
購物車管理模塊主要功能有如下幾個部分：（1）創建購物車 當客戶登錄後，系統會給客戶創建一個購物車放入伺服器的Session會話中。使客戶在整個會話中都擁有一個相同的購物車。這里主要運用了Http協議中的會話機制，將購物車保存在客戶的會話中，這樣在整個客戶游覽不同頁面商品的過程中，都會使用同一個購物車對象。 具體執行步驟：(1)從客戶的請求對象中獲取Session會話對象(2)從會話對象中獲取購物車對象(3)判斷是購物車對象是不是空的，如果是空是就創建一個 /* * 在監聽到session被創建之後，就立即向session中添加一個購物車Car； */ public void sessionCreated(HttpSessionEvent arg0) { HttpSession session = arg0.getSession(); Cart cart=new Cart(); session.setAttribute("cart", cart); } /* * 從session中獲得購物車 */ Cart cart = (Cart) session.getAttribute("cart"); if (cart == null) { cart = new Cart(); }（2）向購物車中添加一個商品項 客戶在查看網頁上的一個商品時，當向伺服器發送一個「添加到購物車」的請求時，會執行這個功能。功能執行過程：(1)從客戶請求對象中獲取商品的ID(2)調用業務層的方法根據商品ID去數據查詢商品的信息，返回商品對象(3)從商品對象中獲取商品名，商品價格，來構建一個商品項對象(4)從Session會話中獲取購物車對象(5)調用業務層的方法來根據購物車對象和商品項對象來執行添加操作(6)將些商品項對象放入到購物車中 部分實現代碼： /* * 從資料庫中把商品取到； */ ProctService proctService = (ProctService) ServiceFactory.getInstance().getService(Globals.PRODUCT_SERVICE); Integer id = Integer.parseInt(request.getParameter("proctid")); Proct proct = proctService.getProctById(id); /* * 在向購物車中添加商品的時候會判斷商品是否已經存在， * 已存在的就不讓在加入了； */ if (cart.isExist(id)) { message = "該商品已經存在!請<a onclick='javascript:history.go(-1)'>返回</a>!"; request.setAttribute("message", message); return mapping.findForward("error"); } else { /* * 向購物車添加一個商品； */ cart.addCart(proct); session.setAttribute("cart", cart); return mapping.findForward("addcartsuccess"); }
Ⅸ 關於javaScript問題 購物車的實現
關於只有最後一個文本框能觸發checknum方法的問題：
其實這里有個邏輯錯誤，主要是<%=i%>中的i是多少的問題。從你貼出來的代碼看，你是不是連JS代碼也循環輸出了吧，也就是有幾條購物信息，就會生成幾個checknum方法，在JS里，同函數名的方法如果多次定義，則只有最後一個定義的方法有效果，那最後一個checknum方法里的<%=i%>實際就只指代最後一個文本框了。結果就是只有最後一個文本框有效果。
其實樓主只需要循環輸出表格，JS代碼只用一個就行了，只要在文本框觸發JS動作時，把<%i%>作為參數傳進JS方法就行了，例如，你可以這么寫：
...
<td width="58" height="30"><input name="num<%=i%>" size="5" type="text" value="<%=goodsitem.number%>" onBlur="checknum(this.form,<%=i%>)"></td>
...
把JS方法放到循環外面，這么寫：
function checknum(myform,i){
var inp = myform['num'+i];
if(isNaN(inp.value) || inp.value.indexOf('.')!=-1){
alert("請不要輸入非法字元！");inp.focus();return;}//判斷是否為數字值
if(inp.value><%=leave%>){alert("請輸入小於現有庫存 （"+<%=leave%>+"） 的數量！");inp.focus();return;}
if(inp.value==0){
alert("請輸入大於1的整數！");inp.focus();return;}
if(inp.value==""){
alert("請輸入修改的數量！");inp.focus();return;}
myform.submit();
}
關於數字修改後觸發checknum方法的問題：
樓主的checknum方法最後是要提交表單的，所以如果用鍵盤事件，那每一次輸入一個字元或刪除一個字元，都會觸發表單提交動作，這應該不是樓主要的結果。字元修改後觸發JS方法有專門的事件處理方法onchange。樓主可以吧onblur換成onchange試試。