HTML代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
meta
name
=
"renderer"
content
=
"webkit"
>
<
title
>A03号桌</
title
>
<
link
rel
=
"stylesheet"
href
=
"resources/css/main.css"
>
</
head
>
<
body
>
<!--购物车-->
<
div
class
=
"shopCart"
>
<!--可以在table外面套一个div写死宽高并设置overflow-y:scroll;，出现大量内容时，让table纵向滚动-->
<
div
class
=
"cartBox"
>
<
table
class
=
"cart"
>
<
thead
>
<
tr
>
<
th
>菜品名称</
th
>
<
th
>数量</
th
>
<
th
>单价</
th
>
<
th
>价格</
th
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
>
<
td
>大闸蟹</
td
>
<
td
>
<
button
class
=
"add"
>+</
button
>
<
span
class
=
"count"
>1</
span
>
<
button
class
=
"reduce"
>-</
button
>
</
td
>
<
td
>
￥<
span
class
=
"price"
>68.00</
span
>
</
td
>
<
td
>
￥<
span
class
=
"sub_total"
>68.00</
span
>
</
td
>
</
tr
>
<
tr
>
<
td
>在天愿作比翼鸟</
td
>
<
td
>
<
button
class
=
"add"
>+</
button
>
<
span
class
=
"count"
>1</
span
>
<
button
class
=
"reduce"
>-</
button
>
</
td
>
<
td
>
￥<
span
class
=
"price"
>68.00</
span
>
</
td
>
<
td
>
￥<
span
class
=
"sub_total"
>68.00</
span
>
</
td
>
</
tr
>
<
tr
>
<
td
>红嘴绿鹦哥</
td
>
<
td
>
<
button
class
=
"add"
>+</
button
>
<
span
class
=
"count"
>1</
span
>
<
button
class
=
"reduce"
>-</
button
>
</
td
>
<
td
>
￥<
span
class
=
"price"
>68.00</
span
>
</
td
>
<
td
>
￥<
span
class
=
"sub_total"
>68.00</
span
>
</
td
>
</
tr
>
</
tbody
>
</
table
>
</
div
>
<
ul
class
=
"totalInfo clearfix"
>
<
li
>
<
span
class
=
"total"
>
合计：<
i
>￥</
i
><
b
>242.00</
b
>
</
span
>
</
li
>
<
li
>
<
button
class
=
"btn-save"
>保存</
button
>
</
li
>
</
ul
>
</
div
>
<
script
src
=
"resources/js/jquery-1.8.3.min.js"
></
script
>
<
script
src
=
"resources/js/shopCart.js"
></
script
>
</
body
>
</
html
>
|
JS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
/****点击增加按钮****/
$(
'.add'
).click(
function
(){
//修改数量
var
n=$(
this
).next().html();
var
num=parseInt(n)+1;
$(
this
).next().html(num);
//计算价格
var
c= $(
this
).parent().siblings().children(
'.price'
).html();
parseInt(c);
var
subPrice = num * c;
var
sub_price = subPrice.toFixed(2);
//保留小数点后面两位小数
$(
this
).parent().siblings().children(
'.sub_total'
).html(sub_price);
//计算总价
var
total=0;
$(
'.sub_total'
).each(
function
(){
var
price=parseInt($(
this
).html());
total+=price;
var
total_price = total.toFixed(2);
$(
'.total b'
).html(total_price);
});
});
/****点击减少按钮****/
$(
'.reduce'
).click(
function
(){
//修改数量
var
n=$(
this
).prev().html();
var
num=parseInt(n)-1;
if
(num==0){
return
;}
//数量减到0就能再减了
$(
this
).prev().html(num);
//计算价格
var
c= $(
this
).parent().siblings().children(
'.price'
).html();
parseInt(c);
var
subPrice = num * c;
subPrice.toFixed(2);
var
sub_price = subPrice.toFixed(2);
$(
this
).parent().siblings().children(
'.sub_total'
).html(sub_price);
//计算总价
var
total=0;
$(
'.sub_total'
).each(
function
(){
var
price=parseInt($(
this
).html());
total+=price;
var
total_price = total.toFixed(2);
$(
'.total b'
).html(total_price);
});
});
|
考虑到篇幅问题，没有贴出CSS代码，最终页面截图如下：
本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1863852
