html+css+jQuery实现购物车功能
<script src="../jquery-1.9."></script>
<script>
//加入购物车
function add_shoppingcart(btn) {
// 判断要加入购物车的商品是否已经在购物车中存在
var $tr = $(btn).parents("tr"); // 找到点击事件的那一行
var name = $tr.children("td:eq(0)").html();
var state = $("#goods td:contains("+name+")");
var price = $tr.children("td:eq(1)").html();
if (state.length == 0){
// 说明该商品尚未加入购物车
var node = "<tr><td>"+name+"</td>"+
"<td>"+price+"</td>"+
"<td><input type='button' οnclick='decrease(this)' value='-'/>" +
"<input type='text' size='3' value='1'/>"+
"<input type='button' οnclick='increase(this)' value='+'/>"+
"</td><td>"+price+"</td><td><input type='button' value='x' οnclick='del(this)'/></td></tr>";
// ((node));
$("#goods").append(node);
// 修改总金额
// ("总金额增加："+price);
setTotal(price);
} else {
// 该商品已经加入购物车
// 找到该商品所在位置，在数量上加1
increase(state.parent().children("td:eq(2)").children("input:eq(2)")[0]);
}
}
function decrease(btn) {
// 找到该行的总金额那一列
var total = $(btn).parent().next("td");
// 找到该商品在购物车里的数量对应的节点
var num = $(btn).next("input");
// 获取单价
var price = $(btn).parent().prev("td").html();
if (parseInt(num.val()) <= 0){
num.val("0");
} else {
num.val(parseInt(num.val())-1);
// 修改总金额
total.html(parseInt(num.val())*parseInt(price));
// 修改购物车的总金额
setTotal(-parseInt(price));
}
}
function increase(btn){
// 找到该行的总金额那一列
var total = $(btn).parent().next("td");
// 获取单价
var price = $(btn).parent().prev("td").html();
// 找到该商品在购物车里的数量对应的节点
var num = $(btn).prev("input");
// (());
num.val(parseInt(num.val())+1);
// 修改总额
total.html(parseInt(num.val())*parseInt(price));
// 修改购物车的总金额
setTotal(price);
}
function del(btn){
// 删除按钮
// 获取删除节点对应的节点
var $td = $(btn).parent();
// 获取该商品总共的金额（数量*单价）
var total = $td.prev("td").html();
// 删除该行
$td.parent().remove();
// 修改总额
setTotal(-total);
}
function setTotal(price){
// 修改购物车总金额
console.log("要修改的总额："+price);
var total = $("tfoot td:eq(1)");
total.html(parseInt(total.html())+parseInt(price));
}
</script>