<!DOCTYPE html>
<html>
<head lang=
"en"
>
<meta charset=
"UTF-8"
>
<title>购物车</title>
<style>
table{
width: 600px;
margin: 0 auto;
border-collapse: collapse;
}
td{
border: 1px solid silver;
line-height: 40px;
text-align: center;
}
.btnl,.btnr{
border-style: none;
outline: none;
color: deeppink;
}
.txt{
width: 30px;
height: 30px;
border-style: none;
outline: none;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td><button id=
"btna"
>全选</button></td>
<td>序号</td>
<td>名称</td>
<td>价钱</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<tr
class
=
"trinfo"
>
<td><input
class
=
"ckbox"
type=
"checkbox"
/></td>
<td>1</td>
<td>毛衣</td>
<td><span
class
=
"price"
>99</span>¥</td>
<td><button
class
=
"btnl"
>-</button><input type=
"text"
class
=
"txt"
value=
"1"
/><button
class
=
"btnr"
>+</button></td>
<td><span
class
=
"smallprice"
>99</span>¥</td>
<td><button
class
=
"btndelete"
>删除</button></td>
</tr>
<tr
class
=
"trinfo"
>
<td><input
class
=
"ckbox"
type=
"checkbox"
/></td>
<td>2</td>
<td>短袖</td>
<td><span
class
=
"price"
>108</span>¥</td>
<td><button
class
=
"btnl"
>-</button><input type=
"text"
class
=
"txt"
value=
"1"
/><button
class
=
"btnr"
>+</button></td>
<td><span
class
=
"smallprice"
>108</span>¥</td>
<td><button
class
=
"btndelete"
>删除</button></td>
</tr>
<tr
class
=
"trinfo"
>
<td><input
class
=
"ckbox"
type=
"checkbox"
/></td>
<td>3</td>
<td>运动鞋</td>
<td><span
class
=
"price"
>10000</span>¥</td>
<td><button
class
=
"btnl"
>-</button><input type=
"text"
class
=
"txt"
value=
"1"
/><button
class
=
"btnr"
>+</button></td>
<td><span
class
=
"smallprice"
>10000</span>¥</td>
<td><button
class
=
"btndelete"
>删除</button></td>
</tr>
<tr
class
=
"trinfo"
>
<td><input
class
=
"ckbox"
type=
"checkbox"
/></td>
<td>4</td>
<td>凉鞋</td>
<td><span
class
=
"price"
>25</span>¥</td>
<td><button
class
=
"btnl"
>-</button><input type=
"text"
class
=
"txt"
value=
"1"
/><button
class
=
"btnr"
>+</button></td>
<td><span
class
=
"smallprice"
>25</span>¥</td>
<td><button
class
=
"btndelete"
>删除</button></td>
</tr>
<tr >
<td><button id=
"btnf"
>反选</button></td>
<td colspan=
"6"
><span>总计:<span
class
=
"totle"
>0</span>¥</span><button>去结算</button></td>
</tr>
</table>
<script>
var
btnleft=document.getElementsByClassName(
"btnl"
);
var
btnright=document.getElementsByClassName(
"btnr"
);
var
txt=document.getElementsByClassName(
"txt"
);
var
price=document.getElementsByClassName(
"price"
);
var
small=document.getElementsByClassName(
"smallprice"
);
var
totle=document.getElementsByClassName(
"totle"
)[0];
var
btna=document.getElementById(
"btna"
);
var
btnf=document.getElementById(
"btnf"
);
var
box=document.getElementsByClassName(
"ckbox"
);
var
btndelete=document.getElementsByClassName(
"btndelete"
);
var
trlist=document.getElementsByClassName(
"trinfo"
);
var
totleprice=0;
for
(
var
i=0;i<btnleft.length;i++)
{
btnleft[i].index=i;
btnleft[i].onclick=
function
(){
var
val=txt[this.index].value;
val--;
if
(val<=1)
{
val=1;
}
txt[this.index].value=val;
addprice(this.index);
}
btnright[i].index=i;
btnright[i].onclick=
function
(){
var
val=txt[this.index].value;
val++;
txt[this.index].value=val;
addprice(this.index);
}
box[i].onclick=
function
(){
showtotleprice();
}
btndelete[i].index=i;
btndelete[i].onclick=
function
(){
totleprice-=parseFloat(small[this.index].innerText);
totle.innerText=totleprice;
trlist[this.index].remove();
for
(
var
k=0;k<trlist.length;k++)
{
trlist[k].index=k;
btndelete[k].index=k;
btnleft[k].index=k;
btnright[k].index=k;
}
}
}
function
addprice(index){
small[index].innerText=(price[index].innerText*txt[index].value);
}
function
showtotleprice(){
totleprice=0;
for
(
var
i=0;i<small.length;i++)
{
if
(box[i].checked)
{
totleprice+=parseFloat(small[i].innerText);
}
}
totle.innerText=totleprice;
}
btna.onclick=
function
(){
for
(
var
i=0;i<box.length;i++)
{
box[i].checked=true;
}
showtotleprice();
}
btnf.onclick=
function
(){
for
(
var
i=0;i<box.length;i++)
{
box[i].checked=!box[i].checked;
}
showtotleprice();
}
</script>
</body>
</html>