这是个仿碧欧泉官网的购物车结算页面。
这里仅提供思路和我的代码作参考，代码具体需要看自己的html界面。
其中的难点在于数量的更改以及价格的结算。当出现一个商品时的结算是较为简单的。但是若有多个商品，则每个数量的更改应有对应的价格。
（几乎所有有实际应用功能的购物车都是如此，所以从一开始做的时候就应该往这个方面去想。）
首先：在html界面写出数量变化的代码，并绑定事件
<td class="cart-table-content-td4">
<input type="button" value="-" οnclick="del(this)"/>
<input type="text" class="text_box" value="1" />
<input type="button" value="+" οnclick="add(this)"/>
</td>
当按下【+】按钮时：
function add(q){
var good_num = $(q).parent().find('input[class*=text_box]');//找到商品数量
var old_num = $(good_num).val();//获取商品数量的值
var new_num=parseInt(old_num)+1;//商品数量+1
$(good_num).val(new_num); //商品数量赋值
// 到这里商品数量的操作已经完成
var one_price=$(q).parent().parent().find(".product-price span").text(); //找到该商品单价
var new_money=parseInt(one_price)*parseInt((good_num).val());//获取单价*数量的总价的值
var total_price = $(q).parent().parent().find(".font-total-price span");//找到该商品总价
$(total_price).text(new_money);//该商品总价赋值
// 到这里该商品总价的计算操作已经完成
var a= $(".font-total-price span"); //找到所有商品的总价
var m=0; //遍历,获取,将字符串转化为数字,并相加
for(var i=0;i<a.length;i++){
m+=Number(a[i].textContent);
}
$("#all_price").text("￥"+m); //赋值给总商品价格
$("#all_total_price").text("￥"+m); //赋值给总价
//到这里商品总结算已经完成
}
当按下【-】按钮时：（思路与【+】相似，不同之处是多了一个判断，商品数量不能小于1）
function del(q){
var good_num = $(q).parent().find('input[class*=text_box]');
var old_num = $(good_num).val();
var new_num=parseInt(old_num)-1;
$(good_num).val(new_num);
if(new_num<1){
alert("再减就没有了！");
$(good_num).val(1);;
}
var one_price=$(q).parent().parent().find(".product-price span").text();
var new_money=parseInt(one_price)*parseInt((good_num).val());
var total_price = $(q).parent().parent().find(".font-total-price span");
$(total_price).text(new_money);
var a= $(".font-total-price span");
var m=0;
for(var i=0;i<a.length;i++){
m+=Number(a[i].textContent);
}
$("#all_price").text("￥"+m);
$("#all_total_price").text("￥"+m);
}
