jQUery实现购物车

jQUery实现购物车

body内部标签

<table id="tbAll">
			<tr>
				<th>项目</th>
				<th>状态</th>
				<th>类型/数量</th>
				<th>单价</th>
				<th>小计</th>
			</tr>
			
			<tr>
				<td class="item">
					<a href="#">
						<img src="img/shopp1.jpg" align="left"/>
						欢乐空间量贩式KTV
					</a>
				</td>
				<td>可购买</td>
				<td>
					<input type="button" value="-" class="btn btnJian" />
					<input type="text" value="1" class="txt" disabled="disabled"/>
					<input type="button" value="+" class="btn btnAdd" />
				</td>
				<td>&yen;39.9</td>
				<td title="price">&yen;39.9</td>
			</tr>
			
			<tr>
				<td class="item">
					<a href="#">
						<img src="img/shopp2.png" align="left" />
						途乐时尚主题量贩式KTV
					</a>
				</td>
				<td>可购买</td>
				<td>
					<input type="button" value="-" class="btn btnJian" />
					<input type="text" value="1" class="txt" disabled="disabled"/>
					<input type="button" value="+" class="btn btnAdd" />
				</td>
				<td>&yen;59.9</td>
				<td title="price">&yen;59.9</td>
			</tr>
			<tr>
				<td colspan="5" class="cal">
					已选<span>2</span>件商品，应付总额：<span id="spn">&yen;99.8</span>
				</td>
			</tr>
		</table>

css样式

<style>
			table{
				border: 1px solid black;
				border-collapse: collapse;
				width: 100%;
				clear: both;
			}
			table tr{
				height: 50%;
				border-bottom: 1px dashed darkgray;
			}
			table td,th{
				text-align: center;
				vertical-align: middle;
			}
			table td.item{
				width: 400px;
				height: 60px;
				line-height: 60px;
				text-align: left;
			}
			table td.item img{
				margin: 5px 5px;
				vertical-align: middle;
				width: 80px;
				
			}
			table tr td.cal{
				text-align: right;
			}
			table tr td.cal span{
				font: bold 25px "微软雅黑";
				color: orange;
			}
			table .btn{
				border: 1px solid #dedede;
				background-color: white;
				width: 16px;
				height: 16px;
			}
			table .txt{
				width: 60px;
				height: 30px;
				border: 1px solid #dedede;
				text-align: center;
				font: bold 25px "微软雅黑";
			}
			table .txt:hover{
				border: 1px solid red;
			}
		</style>

jQuery脚本<记得引用jQuery包>

<script type="text/javascript">
			//调用小计函数
			function xiaoJi($obj,$aa)
			{
				var $price=$obj.parent().next().text().substring(1);//获取单价
				var $jg=parseFloat($aa*$price).toFixed(2);
				$obj.parent().siblings().last().html("&yen;"+$jg);
			}
			
			//调用总计函数
			function zongJi()
			{
				var $sum=0;
				$("td[title='price']").each(function(){
					$sum=$sum+(parseFloat($(this).text().substring(1)));
					})
				$("#spn").html("&yen;"+$sum.toFixed(2));
			}
			//调用总数
			function Sum()
			{
				var $obj=$("span").first()
				var $sum=0;
				$(".txt").each(function(){
					$sum=$sum+(parseInt($(this).val()));
				})
				$obj.text($sum);
			}
			$(function(){
				//加
				$(".btnAdd").click(function(){
					var $aa=$(this).siblings().eq(1).val();//文本框的值
					if ($aa>=1) {
						//删除减号禁用
						$(this).siblings().first().removeAttr("disabled");
					}
					$(this).siblings().eq(1).val(++$aa);//文本框的值加一
					//调用小计
					xiaoJi($(this),$aa);
					//调用总计
					zongJi();
					//计算数量
					Sum();
				})
				
				//减
				$(".btnJian").click(function(){
					var $aa=$(this).siblings().eq(0).val();
					//当文本框的值小于等于1时，减号按钮禁用。否则文本框的值减减
					if ($aa<=1) {
						$(this).attr("disabled","disabled");
					}
					else{
					    $(this).siblings().eq(0).val(--$aa);
					}
					//调用小计
					xiaoJi($(this),$aa);
					//调用总计
					zongJi();
					//计算数量
					Sum();
				})
			})
		</script>