Ⅰ 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试试。