javascript购物车代码？用js做一个购物车

编程之家2026-05-311081次浏览

大家好，如果您还对javascript购物车代码不太了解，没有关系，今天就由本站为大家分享javascript购物车代码的知识，包括用js做一个购物车的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！

jquery 实现加入购物车功能

参考以下代码：

注意需要导入jquery.js.

<!DOCTYPEhtml>

<html>

<head>

<title>购物车----jQuery</title>

<metacharset="utf-8"/>

<styletype="text/css">

h1{

text-align:center;

}

table{

margin:0auto;

width:60%;

border:2pxsolid#aaa;

border-collapse:collapse;

}

tableth,tabletd{

border:2pxsolid#aaa;

padding:5px;

}

th{

background-color:#eee;

}

</style>

<scripttype="text/javascript"src="./js/jquery.js"></script>

<scripttype="text/javascript">

functionadd_shoppingcart(btn){//将btn(dom)转换为jQuery对象

//先获取商品名字和单价还有库存以备后面使用

var$tds=$(btn).parent().siblings();

//$tds.eq(0)是jQuery对象$tds[0]是DOM对象

varname=$tds.eq(0).html();//string

varprice=$tds.eq(1).html();//string

varstock=$tds.eq(3).html();//string

//查看库存是否还有<=0

if(stock<=0){

return;

}

//无论购物车中是否有该商品,库存都要-1

$tds.eq(3).html(--stock);

//在添加之前确定该商品在购物车中是否存在,若存在,则数量+1,若不存在则创建行

var$trs=$("#goods>tr");

for(vari=0;i<$trs.length;i++){

var$gtds=$trs.eq(i).children();

vargName=$gtds.eq(0).html();

if(name==gName){//若存在

varnum=parseInt($gtds.eq(2).children().eq(1).val());

$gtds.eq(2).children().eq(1).val(++num);//数量+1

//金额从新计算

$gtds.eq(3).html(price*num);

return;//后面代码不再执行

}

//若不存在,创建后追加

varli=

"<tr>"+

"<td>"+name+"</td>"+

"<td>"+price+"</td>"+

"<tdalign='center'>"+

"<inputtype='button'value='-'onclick='decrease(this);'/>"+

"<inputtype='text'size='3'readonlyvalue='1'/>"+

"<inputtype='button'value='+'onclick='increase(this);'/>"+

"</td>"+

"<td>"+price+"</td>"+

"<tdalign='center'>"+

"<inputtype='button'value='x'onclick='del(this);'/>"+

"</td>"+

"</tr>";

//追加到#goods后面

$("#goods").append($(li));

//总计功能

total();

}

//辅助方法--单击购物车中的"+""-""x"按钮是找到相关商品所在td,以jQuery对象返回

functionfindStock(btn){

varname=$(btn).parent().siblings().eq(0).html();//获取商品名字

//注意table默认有行分组,若此处使用$("#table1>tr:gt(0)")则找不到任何tr

var$trs=$("#table1>tbody>tr:gt(0)");

for(vari=0;i<$trs.length;i++){

varfName=$trs.eq(i).children().eq(0).html();

if(name==fName){//找到匹配的商品

return$trs.eq(i).children().eq(3);

}

//增加"+"功能

functionincrease(btn){

//获取该商品库存看是否<=0

var$stock=findStock(btn);

varstock=$stock.html();

if(stock<=0){

return;

}

//库存-1

$stock.html(--stock);

//购物车数据改变

var$td=$(btn).prev();

varnum=parseInt($td.val());//number

//num此时为number类型(在计算时会自动转换为number类型)

$td.val(++num);

//获取单价,再加计算前要先转换为number类型

varprice=parseInt($(btn).parent().prev().html());

$(btn).parent().next().html(num*price);

//总计功能

total();

}

//减少"-"功能

functiondecrease(btn){

//该商品数量=1时候不能再减少

varnum=parseInt($(btn).next().val());

if(num<=1){

return;

}

var$stock=findStock(btn);

//库存+1

varstock=$stock.html();

$stock.html(++stock);

//商品数量-1

$(btn).next().val(--num);

//从新计算金额

varprice=parseInt($(btn).parent().prev().html());

$(btn).parent().next().html(price*num);

//总计功能

total();

}

//"x"删除按钮功能

functiondel(btn){

//将商品数量归还库存

var$stock=findStock(btn);

varstock=parseInt($stock.html());

varnum=parseInt($(btn).parent().prev().prev().children().eq(1).val());

$stock.html(num+stock);

//清空改行商品列表

$(btn).parent().parent().remove();

//总计功能

total();

}

//总计功能

functiontotal(){

//获取所有购物车中的trs

var$trs=$("#goodstr");

varamount=0;

for(vari=0;i<$trs.length;i++){

varmoney=parseInt($trs.eq(i).children().eq(3).html());

amount+=money;

}

//写入总计栏

$("#total").html(amount);

}

</script>

</head>

<body>

<tableid="table1">

<tr>

</tr>

<tr>

<tdalign="center">