jquery mysql实现加入购物车_使用jQuery实现购物车

本文实例为大家分享了jQuery实现购物车的具体代码，供大家参考，具体内容如下

HTML代码

商品编号商品名称商品单价商品颜色商品库存操作

2018090201鼠标78黑色5002018090202键盘45白色3002018090203显示器880黑色2002018090204主机2332蓝色350

商品编号商品名称商品单价商品颜色购买数量单项小计操作

总计0

CSS代码

* {

margin: 0;

padding: 0;

}

div {

width: 1000px;

height: 350px;

border: 3px solid #ccc;

margin: 5px auto;

overflow: auto;

}

table {

border-collapse: collapse;

width: 100%;

}

td {

border: 1px solid black;

text-align: center;

height: 30px;

}

caption {

font-size: 28px;

font-weight: bold;

}

#gwc input[type="text"] {

width: 30px;

margin-left: 4px;

margin-right: 4px;

}

#gwc input[type="button"] {

width: 20px;

}

JavaScript代码

var sum; //定义全局变量：购物车商品总计

$(function() {

//页面加载完成后给全局变量赋值

sum = $("#sum");

})

function addGoods(btn) {

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

var tr = $(td).parent();

var tds = $(tr).children();

//创建一个行节点

var newTr = $("

");

//给行节点赋值

newTr.html(

'

' + tds[0].innerHTML + '' +

'

' + tds[1].innerHTML + '' +

'

' + tds[2].innerHTML + '' +

'

' + tds[3].innerHTML + '' +

'

' +

'' +

'' +

'' +

'

' +

'

' +

tds[2].innerHTML +

'

' +

'

' +

'' +

'

'

);

//追加新节点

$("#gwc").append(newTr);

//更新总计

var s = parseFloat(sum.html());

sum.html(s + parseFloat(tds[2].innerHTML));

}

function add(btn) {

//获取按钮的上一个兄弟

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

txt.val(parseFloat(txt.val()) + 1);

//获取该商品的单价

var price = $(btn).parent().prev().prev();

//更新总计

var s = parseFloat(sum.html());

sum.html(s + parseFloat(price.html()));

}

function reduce(btn) {

//获取按钮的下一个兄弟

var txt = $(btn).next();

if (parseFloat(txt.val()) == 1) {

return;

}

txt.val(parseFloat(txt.val()) - 1);

//获取该商品的单价

var price = $(btn).parent().prev().prev();

//更新总计

var s = parseFloat(sum.html());

sum.html(s - parseFloat(price.html()));

}

function deleteGoods(btn) {

//获取当前行

var tr = $(btn).parent().parent();

//删除当前行

tr.remove();

//获取该商品的单价

var price = $(btn).parent().siblings().eq(2);

//更新总计

var s = parseFloat(sum.html());

sum.html(s - parseFloat(price.html()));

}

最终效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。