Ⅰ 无刷新修改购物车产品数量得总金额的js代码
用你给的代码基础上用了一个最简单的js计算,数量是键盘输入,也可以在左右两侧加上自增减的操作,望采纳!
<table width="500" border="0" cellpadding="5" cellspacing="0">
<tr><td>数量</td><td>单价</td></tr>
<tr>
<td><input type="text" id="num" value="1" size="5" onchange="setTotal();"/></td>
<td><span id="fare">6.00</span>元</td>
</tr>
<tr>
<td> </td>
<td>总金额:¥:<span id="total_Price">6</span>.00</td>
</tr>
</table>
<p>数量那里最好能键盘输入,不然买100件就有的点了。麻烦再给看看哈</p>
<script type="text/JavaScript">
function setTotal(){
var fare=document.getElementById("fare").innerHTML;
//alert(fare);
var num=document.getElementById("num").value;
if(/\D/.test(num)){//检查用户输入的值是否是数字
alert("请您输入正确的数量!");
document.getElementById("total_Price").innerHTML="0"
}else{
document.getElementById("total_Price").innerHTML=parseFloat(fare*num);
}
}
</script>
Ⅱ 如何实现加jquery购物车数量加减链接传递购买数量 帝国cms
具体要看你的网页,你贴上你的购物车源码和图片看看
Ⅲ 如何用jquery写多个购物车的数量曾减,我用jquery写了但只第一个购物车增减有用,其它的无效,代码如下:
这个时候就像前面大哥说的 不能用来表示了 可以用class
还有你的这个结构是不规范的 id一个页面只能是唯一的
为了不同时改变 其他的购物车的数量 可以来找到相对的
这个结构:
<div>
<p>单价:3.95</p>
<input class="min" name="" type="button" value="-" />
<input class="text_box" name="" type="text" value="4" />
<inputclass="add" name="" type="button" value="+" />
<p>总价:<label class="total"></label></p>
</div>
<div>
<p>单价:3.95</p>
<input class="min" name="" type="button" value="-" />
<input class="text_box" name="" type="text" value="4" />
<input class="add" name="" type="button" value="+" />
<p>总价:<label class="total"></label></p>
</div>
把每个购物车用一个div包起来
js:
$(function(){
//var t = $("#text_box");
$(".add").click(function(){
var t= $(this).parent().find(".text_box"); //根据这个来找到它相对的元素 当然也可以直接 //$(this).prev(); 这个直接来找到
t.val(parseint(t.val()+1);
setTotal($(this),t.val());
})
$(".min").click(function(){
var t= $(this).parent().find(".text_box"); //根据这个来找到它相对的元素 当然也可以直接 //$(this).next(); 这个直接来找到
t.val(parseint(t.val()-1);
setTotal($(this),t.val());
})
function setTotal(obj,number){
var total=number*$(obj).parent().find("p:first").text(); //这里算出总价
$(obj)).parent().find("total").html(total.toFixed(2));
}
// setTotal();
})
给一个建议 以后要想做好东西 布局一定要好
一个好的结构 才能让你任意操作
Ⅳ struts中jquery如何实现购物车中多个商品数量的增减
$("#btn").click(function(){
var txtvalue=$("商品数量input").val();
$("商品数量input").val(txtvalue+1);
});
你需要这个?还是对选择器不熟,只能选到内地一条记录?容
Ⅳ JavaScript根据这个代码,做出购物车里减一个数量的效果,跪求!我实在不会!
把
inputcount[index].value=count+1;
改为
if (count <= 0) { return };
inputcount[index].value=count--;
Ⅵ 用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>
Ⅶ jQuery thinkphp 购物车多物品数量的加减+总价计算
(1)、js里用+=就是连接的意思,不是累加的意思,所以不能用s+=,需要用s=XXX+s。
(2)、如内果容+1的时候,数据库也+1,这块需要用到ajax,当你单机的时候,触发ajax
$.post("url",{"id":"商品id"},function(data){
})
url填写一个地址,把商品的id发到处理页,就可以实现了
Ⅷ 购物车中 用鼠标点击文本框前的‘+’号 或后面的‘-’号时 数量相应增减 那段代码是JS么 是的话怎么写的
var count=1;
if(按钮被点击操作){//代码自己找
count=count+1;
}else if(减号按钮被点击操作){
count=count-1;
}
Ⅸ jsp购物车计算数量的问题!
总计只能是每次改动要更新一次咯。没次算完小计后,再吧所有小计加起来得总计。
Ⅹ jquery问题购物车加减按钮
因为一个页面中只能存在一个 id 为 add 的元素,根据你现在的代码,如果有10行记录,那就会有10个 id 为 add 的 input。
所以你要把这些 input 的 id 都改为 class,text_box 的值也要根据每次点击来判断
<input class="min" name="" type="button" value="-" />
<input class="text_box" name="goodnum" type="text" value="${item.value.quantity }" style="width:25px;" />
<input class="add" name="" type="button" value="+" />
$(".add").click(function() {
// $(this).prev() 就是当前元素的前一个元素,即 text_box
$(this).prev().val(parseInt($(this).prev().val()) + 1);
setTotal();
});
$(".min").click(function() {
// $(this).next() 就是当前元素的下一个元素,即 text_box
$(this).next().val(parseInt($(this).next().val()) - 1);
setTotal();
});