jQuery? ???? ??? ?? ? ?? jQuery ????? ??
?? ???? JavaScript? ???? ???? ??? ???? ??? ??????.
? ???? JavaScript ????? jQuery? ???? ??? ???? ???? ??? ???? ???. ?? ??, ?? ??, ?? ??, ?? ?? ??, ?? ?? ?? ??? ???? ??? ?? ???.
??? ?? ??? ?? ??? ???? ?? ?? ?? ??? ??? ????. ??? ? ??? ?????.
?? JavaScript ???? ???? ???? ???? ?? CSS ???? ??????.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery實(shí)現(xiàn)購物車功能</title>
<style>
*{margin:0px;padding:0px;border:0px; font-size:12px;color:#333; font-family:微軟雅黑;}
ul li{ list-style:none}
a{ text-decoration:none;}
a:hover{ color:#e46432;}
body{margin:auto; overflow-x:hidden;}
/*****購物車*********/
.gwc{ width:96%;overflow:hidden;}
.gwc_tb1{ width:100%; border-top:5px solid #48b9e5; background:#d0e7fa; height:38px; margin-top:20px; overflow:hidden;}
.tb1_td1{ width:3%; text-align:center;}
.tb1_td3{ width:18%; text-align:center;}
.tb1_td4{ width:20%; text-align:center;}
.tb1_td5{ width:22%; text-align:center;}
.tb1_td6{ width:13%; text-align:center;}
.tb1_td7{ text-align:center;}
.gwc_tb2{ width:100%; margin-top:20px; background:#eef6ff; border:1px solid #e5e5e5; padding-top:20px; padding-bottom:20px;}
.tb2_td1{ width:6%; text-align:center;}
.tb2_td2{ width:13%; text-align:center;}
.tb2_td2 img{ width:96px; height:96px; border:2px solid #c9c6c7;}
.tb2_td3{ width:5%; text-align:center;}
.tb2_td3 a{ font-size:14px; line-height:22px;}
.gwc_tb3{ width:100%; border:1px solid #d2d2d2; background:#e7e7e7; height:46px; margin-top:20px; }
.gwc_tb3 tr td{font-size:14px;}
.tb3_td1{ width:13%; text-align:center;}
.tb3_td2{ width:100px;text-align:center;}
.tb3_td2 span{ color:#ff5500;font-size:14px; font-weight:bold; padding-left:5px; padding-right:5px; }
.tb3_td3{ width:220px;text-align:center;}
.tb3_td3 span{ font-size:18px; font-weight:bold;}
.tb3_td4{ width:110px;text-align:center;}
.jz2{ width:100px; height:46px; line-height:46px; text-align:center; font-size:18px; color:#fff; background:#ee0000; display:block; float:right;}
#jz1{font-size:18px;}
@media only screen and (min-width: 410px){
div{
margin: auto;
}
}
</style>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="js/Calculation.js"></script>
</head>
<body>
<div class="gwc" style=" margin:auto;">
<table cellpadding="0" cellspacing="0" class="gwc_tb1">
<tr>
<td class="tb1_td1"><input id="Checkbox1" type="checkbox" class="allselect"/></td>
<td class="tb1_td1">全選</td>
<td class="tb1_td3">商品</td>
<td class="tb1_td4">商品信息</td>
<td class="tb1_td5">數(shù)量</td>
<td class="tb1_td6">單價(jià)</td>
<td class="tb1_td7">操作</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="gwc_tb2" >
<tr>
<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-1" /></td>
<td class="tb2_td2"><a href="#"><img src="https://img.php.cn/upload/course/000/000/008/581c290d2a73a781.jpg"/></a></td>
<td class="tb2_td3"><a href="#">產(chǎn)品標(biāo)題</a></td>
<td class="tb1_td4">產(chǎn)品介紹</td>
<td class="tb1_td5">
<input id="min1" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
<input id="text_box1" name="" type="text" value="1" style=" width:20px; text-align:center; border:1px solid #ccc;" />
<input id="add1" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
</td>
<td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
<td class="tb1_td7"><a href="#">操作</a></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="gwc_tb2" >
<tr>
<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-2" /></td>
<td class="tb2_td2"><a href="#"><img src="https://img.php.cn/upload/course/000/000/008/581c294ad5abd805.jpg"/></a></td>
<td class="tb2_td3"><a href="#">產(chǎn)品標(biāo)題</a></td>
<td class="tb1_td4">產(chǎn)品介紹</td>
<td class="tb1_td5">
<input id="min2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
<input id="text_box2" name="" type="text" value="1" style=" width:20px; text-align:center; border:1px solid #ccc;" />
<input id="add2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
</td>
<td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
<td class="tb1_td7"><a href="#">操作</a></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="gwc_tb3">
<tr>
<td class="tb1_td1"><input id="checkAll" class="allselect" type="checkbox" /></td>
<td class="tb1_td1">全選</td>
<td class="tb3_td1">
<input id="invert" type="checkbox" />反選
<input id="cancel" type="checkbox" />取消
</td>
<td class="tb3_td2">已選商品 <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label> 件</td>
<td class="tb3_td3">合計(jì)(不含運(yùn)費(fèi)):<span>￥</span><span style=" color:#ff5500;"><label id="zong1" style="color:#ff5500;font-size:14px; font-weight:bold;">0.00</label></span></td>
<td class="tb3_td4"><span id="jz1">結(jié)算</span><a href="#" style=" display:none;" class="jz2" id="jz2">結(jié)算</a></td>
</tr>
</table>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>?? jquery ?? ?????? ?????.
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
??? JS ?? Calculation.js? ?? ?? ??? js ??? ?? ?? <script>? ???? ??
<script type="text/javascript" src="js/Calculation.js"></script>
