ACCP6.0第九章练习
1
//
根据标签ID获取值
2
function
$(id)
3
{
4
return
document.getElementById(id);
5
}
6
//
全局变量
7
var
inputs
=
document.getElementsByTagName(
"
input
"
);
8
//
初始化数量和Checkbox状态，默认为0和全选
9
function
init()
10
{
11
$(
"
jifen
"
).textContent
=
0
;
12
$(
"
price
"
).textContent
=
0
;
13
for
(
var
i
=
0
;i
<
inputs.length;i
++
)
14
{
15
if
(inputs[i].type
==
"
text
"
)
16
{
17
inputs[i].value
=
1
;
18
initPrice(inputs[i].parentNode.parentNode);
19
}
20
if
(inputs[i].type
==
"
checkbox
"
)
21
{
22
inputs[i].checked
=
true
;
23
}
24
}
25
}
26
//
增加和删除数量
27
function
change(item)
28
{
29
if
(item.value
==
"
+
"
)
30
{
31
item.parentNode.childNodes[
1
].value
=
parseInt( item.parentNode.childNodes[
1
].value)
+
1
;
32
calPrice(item.parentNode.parentNode,
"
+
"
);
33
return
;
34
}
35
if
(item.value
==
"
-
"
)
36
{
37
if
(parseInt( item.parentNode.childNodes[
1
].value)
<=
0
)
38
{
39
alert(
"
>=0
"
);
40
return
;
41
}
42
item.parentNode.childNodes[
1
].value
=
parseInt( item.parentNode.childNodes[
1
].value)
-
1
;
43
calPrice(item.parentNode.parentNode,
"
-
"
);
44
return
;
45
}
46
}
47
//
计算加载页面时的价格
48
function
initPrice(item)
49
{
50
var
p
=
parseInt(item.childNodes[
3
].textContent);
51
item.childNodes[
5
].textContent
=
p;
52
//
计算价格和积分
53
var
jifen
=
parseInt($(
"
jifen
"
).textContent)
+
parseInt(item.childNodes[
2
].textContent);
54
$(
"
jifen
"
).textContent
=
jifen;
55
var
price
=
parseInt($(
"
price
"
).textContent)
+
parseInt(item.childNodes[
3
].textContent);
56
$(
"
price
"
).textContent
=
price;
57
}
58
//
根据数量的改变，实时改变价格和积分
59
function
calPrice(item,item2)
60
{
61
//
alert(item.childNodes[2].textContent);
62
//
IE浏览器使用innerText属性，因测试环境是Chrome浏览器，故未曾考虑兼容性
63
var
p;
64
var
jifen;
65
var
price;
66
switch
(item2)
67
{
68
case
"
+
"
:
69
//
计算当前行价格
70
p
=
parseInt(item.childNodes[
3
].textContent)
+
parseInt(item.childNodes[
5
].textContent);
71
//
计算价格和积分
72
jifen
=
parseInt($(
"
jifen
"
).textContent)
+
parseInt(item.childNodes[
2
].textContent);
73
price
=
parseInt($(
"
price
"
).textContent)
+
parseInt(item.childNodes[
3
].textContent);
74
break
;
75
case
"
-
"
:
76
//
计算当前行价格
77
p
=
parseInt(item.childNodes[
5
].textContent)
-
parseInt(item.childNodes[
3
].textContent);
78
//
计算价格和积分
79
jifen
=
parseInt($(
"
jifen
"
).textContent)
-
parseInt(item.childNodes[
2
].textContent);
80
price
=
parseInt($(
"
price
"
).textContent)
-
parseInt(item.childNodes[
3
].textContent);
81
break
;
82
}
83
item.childNodes[
5
].textContent
=
p;
84
$(
"
jifen
"
).textContent
=
jifen;
85
$(
"
price
"
).textContent
=
price;
86
}
87
//
实现全选和反选功能
88
function
selectAll()
89
{
90
if
( $(
"
sa
"
).checked
==
true
)
91
{
92
for
(
var
i
=
0
;i
<
inputs.length;i
++
)
93
{
94
if
(inputs[i].type
==
"
checkbox
"
)
95
{
96
inputs[i].checked
=
true
;
97
}
98
}
99
}
100
else
101
{
102
for
(
var
i
=
0
;i
<
inputs.length;i
++
)
103
{
104
if
(inputs[i].type
==
"
checkbox
"
)
105
{
106
inputs[i].checked
=
false
;
107
}
108
}
109
}
110
}
111
//
当任意一个反选是，取消全选，反之，亦然
112
function
changeStatus()
113
{
114
$(
"
sa
"
).checked
=
true
;
115
for
(
var
i
=
0
;i
<
inputs.length;i
++
)
116
{
117
if
(inputs[i].type
==
"
checkbox
"
)
118
{
119
if
(inputs[i].checked
==
false
)
120
{
121
$(
"
sa
"
).checked
=
false
;
122
}
123
}
124
}
125
}
126
//
实现删除功能，每列最后的删除功能
127
function
deleteRow(item)
128
{
129
var
t
=
item.parentNode.parentNode;
130
var
i
=
t.rowIndex;
131
//
IE浏览器使用innerText属性，因测试环境是Chrome浏览器，故未曾考虑兼容性
132
//
计算价格和积分
133
var
jifen
=
parseInt($(
"
jifen
"
).textContent)
-
(parseInt(t.childNodes[
4
].childNodes[
1
].value)
*
parseInt(t.childNodes[
2
].textContent));
134
$(
"
jifen
"
).textContent
=
jifen;
135
var
price
=
parseInt($(
"
price
"
).textContent)
-
parseInt(t.childNodes[
5
].textContent);
136
$(
"
price
"
).textContent
=
price;
137
$(
"
t1
"
).deleteRow(i);
138
$(
"
t1
"
).deleteRow(i
-
1
);
139
}
140
//
删除按钮功能的实现
141
function
deleteC()
142
{
143
for
(
var
i
=
inputs.length
-
1
;i
>
0
;i
--
)
144
{
145
if
(i
!=
0
&&
inputs[i].type
==
"
checkbox
"
)
146
{
147
if
(inputs[i].checked
==
true
)
148
{
149
deleteRow(inputs[i]);
150
}
151
}
152
}
153
$(
"
sa
"
).checked
=
false
;
154
}
155
window.onload
=
init;
1
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
2
3
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
4
<
head
>
5
<
title
>
无标题页
</
title
>
6
<
style
type
="text/css"
>
7
img
8
{
9
vertical-align
:
middle
;
10
}
11
tbody td
12
{
13
text-align
:
center
;
14
}
15
span
16
{
17
color
:
Red
;
18
}
19
input[type="text"]
20
{
21
width
:
20px
;
22
text-align
:
center
;
23
}
24
</
style
>
25
<
script
type
="text/javascript"
src
="JScript.js"
></
script
>
26
</
head
>
27
<
body
>
28
<
table
id
="t1"
border
="1"
cellpadding
="0"
cellspacing
="0"
width
="700px"
>
29
<
thead
>
30
<
tr
><
td
style
="width:30px;"
><
input
type
="checkbox"
id
="sa"
checked
="checked"
onclick
="selectAll();"
/></
td
><
td
style
="width:auto;"
>
店铺宝贝
</
td
><
td
style
="width:80px;"
>
获积分
</
td
><
td
style
="width:100px;"
>
单价(元)
</
td
><
td
style
="width:80px;"
>
数量
</
td
><
td
style
="width:80px;"
>
小记(元)
</
td
><
td
style
="width:50px;"
>
操作
</
td
></
tr
>
31
</
thead
>
32
<
tbody
>
33
<
tr
align
="left"
><
td
align
="left"
colspan
="7"
>
123
</
td
></
tr
>
34
<
tr
><
td
><
input
type
="checkbox"
onclick
="changeStatus();"
/></
td
><
td
><
img
src
=""
alt
="Pic1"
/>
des
</
td
><
td
>
5
</
td
><
td
>
138.00
</
td
><
td
><
input
type
="button"
value
="-"
onclick
="change(this)"
/><
input
type
="text"
readonly
="readonly"
/><
input
type
="button"
value
="+"
onclick
="change(this)"
/></
td
><
td
>
138
</
td
><
td
><
span
onclick
="deleteRow(this)"
>
删除
</
span
></
td
></
tr
>
35
<
tr
><
td
colspan
="7"
>
123
</
td
></
tr
>
36
<
tr
><
td
><
input
type
="checkbox"
onclick
="changeStatus();"
/></
td
><
td
><
img
src
=""
alt
="Pic1"
/>
des
</
td
><
td
>
12
</
td
><
td
>
265.00
</
td
><
td
><
input
type
="button"
value
="-"
onclick
="change(this)"
/><
input
type
="text"
readonly
="readonly"
/><
input
type
="button"
value
="+"
onclick
="change(this)"
/></
td
><
td
>
138
</
td
><
td
><
span
onclick
="deleteRow(this)"
>
删除
</
span
></
td
></
tr
>
37
<
tr
><
td
colspan
="7"
>
123
</
td
></
tr
>
38
<
tr
><
td
><
input
type
="checkbox"
onclick
="changeStatus();"
/></
td
><
td
><
img
src
=""
alt
="Pic1"
/>
des
</
td
><
td
>
3
</
td
><
td
>
85.00
</
td
><
td
><
input
type
="button"
value
="-"
onclick
="change(this)"
/><
input
type
="text"
readonly
="readonly"
/><
input
type
="button"
value
="+"
onclick
="change(this)"
/></
td
><
td
>
138
</
td
><
td
><
span
onclick
="deleteRow(this)"
>
删除
</
span
></
td
></
tr
>
39
<
tr
><
td
colspan
="7"
>
123
</
td
></
tr
>
40
<
tr
><
td
><
input
type
="checkbox"
onclick
="changeStatus();"
/></
td
><
td
><
img
src
=""
alt
="Pic1"
/>
des
</
td
><
td
>
12
</
td
><
td
>
12.00
</
td
><
td
><
input
type
="button"
value
="-"
onclick
="change(this)"
/><
input
type
="text"
readonly
="readonly"
/><
input
type
="button"
value
="+"
onclick
="change(this)"
/></
td
><
td
>
138
</
td
><
td
><
span
onclick
="deleteRow(this)"
>
删除
</
span
></
td
></
tr
>
41
</
tbody
>
42
<
tfoot
>
43
<
tr
><
td
colspan
="7"
align
="right"
>
商品总价(不含运费)：
<
span
id
="price"
></
span
>
元
</
td
></
tr
>
44
<
tr
><
td
><
input
type
="button"
value
="删除所选"
onclick
="deleteC()"
/></
td
><
td
colspan
="6"
align
="right"
>
可获积分
<
span
id
="jifen"
></
span
>
点
</
td
></
tr
>
45
<
tr
><
td
colspan
="7"
align
="right"
><
input
type
="button"
value
="立即购买"
/></
td
></
tr
>
46
</
tfoot
>
47
</
table
>
48
</
body
>
49
</
html
>