请教简单的购物车如何单个赠加数量，合计计算等，谢谢！！

hnzzlqw 2017-12-31 12:57:09
现在购物车的问题是：初始化的合计只有第一行是正常的其它不能显示，点击加加减减其它行的表单也同时在加减，删除按钮也只有第一行起作用，总金额合计不了，请朋友们帮忙看看，给个建义也好
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="../jQuery/jquery-3.2.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
//全选
$('#checkbox').click(function(){
$('.pox input').prop('checked',true);
$('#checkbox2').prop('checked',false);
});
//取消全选
$('#checkbox2').click(function(){
$('.pox input').prop('checked',false);
$('#checkbox').prop('checked',false);
});
//首先显示合计的金额
var zhi = $('.text').val();
$('#hj').text($('#jg').text() * zhi);
//按钮数字加加
$('#jia').click(function(){
var num = $('.text').val();
var n = ++num;
$('.text').val(n);
$('#hj').text($('#jg').text() * $('.text').val());
});
//按钮数字减减
$('#jian').click(function(){
var num = $('.text').val();
if(num > 1){
var n = --num;
$('.text').val(n);
$('#hj').text($('#jg').text() * $('.text').val());
}else{
alert('此商品不能少于一件！');
}
});
//删除节点
$('#del').click(function(){
if(confirm('你确认要删除嘛！')){
$(this).closest('tr').remove();
return false;
}
});
//表格合计相加


});
//disabled
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.pox{
border:1px #999 solid;
}
.text{
width:100px;
}
#totle{
font-size:12pt;
font-weight:bold;
}
body,td,th {
font-size: 10pt;
}
</style>
</head>

<body><br />

<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" height="30">
<tr>
<td width="150" bgcolor="#FFCC66">
<input type="checkbox" name="checkbox" id="checkbox" />全选
<input type="checkbox" name="checkbox2" id="checkbox2" />取消
</td>
<td width="150" bgcolor="#FFCC66">品名</td>
<td width="60" align="center" bgcolor="#FFCC66">单价</td>
<td width="200" align="center" bgcolor="#FFCC66">数量</td>
<td width="80" align="center" bgcolor="#FFCC66">合计</td>
<td width="60" align="center" bgcolor="#FFCC66">操作</td>
</tr>
</table>

<form action="">
<div class="pox">
<table width="700" border="1" align="center" cellpadding="0" cellspacing="0" height="180">
<tr>
<td width="40" align="center" bgcolor="#FFFFCC">
<input type="checkbox" />
</td>
<td width="260" align="center" bgcolor="#FFFFCC">衬衫</td>
<td width="60" align="center" bgcolor="#FFFFCC"><span id="jg">28</span></td>
<td width="200" align="center" bgcolor="#FFFFCC">
<input type="button" name="button" id="jia" value="+" />
<input name="textfield" type="text" class="text" id="textfield" value="1"/>
<input type="button" name="button2" id="jian" value="-" />
</td>
<td width="80" align="center" bgcolor="#FFFFCC"><span id="hj"></span></td>
<td width="60" align="center" bgcolor="#FFFFCC"><span id="del" style='cursor:pointer'>删除</span></td>
</tr>
<tr>
<td align="center" bgcolor="#CCFFFF">
<input type="checkbox" />
</td>
<td align="center" bgcolor="#CCFFFF">书</td>
<td align="center" bgcolor="#CCFFFF"><span id="jg">20</span></td>
<td align="center" bgcolor="#CCFFFF">
<input type="button" name="button" id="jia" value="+" />
<input name="textfield" type="text" class="text" id="textfield" value="1"/>
<input type="button" name="button2" id="jian" value="-" />
</td>
<td align="center" bgcolor="#CCFFFF"><span id="hj">20</span></td>
<td align="center" bgcolor="#CCFFFF"><span id="del" style='cursor:pointer'>删除</span></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFCC">
<input type="checkbox" />
</td>
<td align="center" bgcolor="#FFFFCC">笔</td>
<td align="center" bgcolor="#FFFFCC"><span id="jg">5</span></td>
<td align="center" bgcolor="#FFFFCC">
<input type="button" name="button" id="jia" value="+" />
<input name="textfield" type="text" class="text" id="textfield" value="1"/>
<input type="button" name="button2" id="jian" value="-" />
</td>
<td align="center" bgcolor="#FFFFCC"><span id="hj">5</span></td>
<td align="center" bgcolor="#FFFFCC"><span id="del" style='cursor:pointer'>删除</span></td>
</tr>
<tr>
<td align="center" bgcolor="#CCFFFF">
<input type="checkbox" />
</td>
<td align="center" bgcolor="#CCFFFF">荼</td>
<td align="center" bgcolor="#CCFFFF"><span id="jg">12.5</span></td>
<td align="center" bgcolor="#CCFFFF">
<input type="button" name="button" id="jia" value="+" />
<input name="textfield" type="text" class="text" id="textfield" value="1"/>
<input type="button" name="button2" id="jian" value="-" />
</td>
<td align="center" bgcolor="#CCFFFF"><span id="hj">12</span></td>
<td align="center" bgcolor="#CCFFFF"><span id="del" style='cursor:pointer'>删除</span></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFCC">
<input type="checkbox" />
</td>
<td align="center" bgcolor="#FFFFCC">糖</td>
<td align="center" bgcolor="#FFFFCC"><span id="jg">10.4</span></td>
<td align="center" bgcolor="#FFFFCC">
<input type="button" name="button" id="jia" value="+" />
<input name="textfield" type="text" class="text" id="textfield" value="1"/>
<input type="button" name="button2" id="jian" value="-" />
</td>
<td align="center" bgcolor="#FFFFCC"><span id="hj">10</span></td>
<td align="center" bgcolor="#FFFFCC"><span id="del" style='cursor:pointer'>删除</span></td>
</tr>
<tr>
<td bgcolor="#FFCCCC"> </td>
<td bgcolor="#FFCCCC"> </td>
<td bgcolor="#FFCCCC"> </td>
<td colspan="3" bgcolor="#FFCCCC">合计：<strong>￥</strong><strong id="totle"></strong></td>
</tr>
</table>
</div>
</form>

</html>
...全文
342 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
一叶飞舟 2018-01-01
  • 打赏
  • 举报
 回复
1、购物车总额可以放到一个hidden； 2、单个商品分配一个id，单件商品的总额根据数量的变化实时计算；
天际的海浪 2017-12-31
  • 打赏
  • 举报
 回复
再有事件中不能只简单的用$('.text').val(); 应该是 $(this).closest('tr').find('.text').val();
天际的海浪 2017-12-31
  • 打赏
  • 举报
 回复
你的代码主要问题是元素id重复了。 同一页面中元素的id必须是唯一的，id不能重复，重复的id用js获取时，只能获取到第一个。 要获取多个元素时，应该用元素的class获取。
js+vue+vuex点击步进器加入购物车、计算价格、点单列表，点单总数，单个列表点单数量，总价格，vuex版(增加，删除，金额计算，存储，总数，单个列表点单数量，总价格)
js+vue+vuex点击步进器加入购物车、计算价格、点单列表，点单总数，单个列表点单数量，总价格，vuex版(增加，删除，金额计算，存储，总数，单个列表点单数量，总价格)
JavaScript实现购物车计算价格功能
这样做的原因是在数据库内我们只会存储某客户的准备购买的商品件数，而不会存储每类商品价格的小计和购物车内所有物品的商品总价格，初始化的目的就是为将这些数字计算出来后显示在前台界面上。 2.当更改数量输入框...
vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能 vue实战
一、单价商品的金额计算 整个操作过程是，商品的数量是可以控制的，可增可减，最少为1。并且在数量的变化中，商品的总价也在变化。 控制数量与总价的变化需要定义新方法。 页面中的+和-控制数量的变化，当点击的...
小程序购物车 全选、单选、计算总价js
// 购物车js data: { //购物车列表 Goods: [], index: '', isAllselected: false, totalPrice: 0, rid: '', selectedList: [], //选中列表 goodsCarts: [] //去结算的列表 }, // 选中当前商品radio ...
JS实现简单购物车
JS实现购物车，功能包括：删除、总计、全选、反选等
JavaScript

87,994

社区成员

224,689

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章