购物车功能实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43467548/article/details/101633226
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
 h1{
 	text-align:center;
 }
 table{
 	width:80%;
 	margin: 0 auto;
 	border:1px solid red;
 	/* //表格和单元格的边框合并 */
 	border-collapse: collapse;
 }
 td,th{
 	border:1px solid red;
 	text-align:center;
 }
#total>td{
		text-align:right;
	}

</style>
<script type="text/javascript">
$(function(){
	//给按钮绑定事件
	$("input[value='加入购物车']").click(function(){
		//通过按钮找到所在td
	var name=$(this).parent().siblings().eq(0).text();
	var price=$(this).parent().siblings().eq(1).text();
	var nametd=$("<td></td>");
	var pricetd=$("<td></td>");
	//设置td文本
	nametd.text(name);
	pricetd.text(price);	
	//创建数量的td
	var numtd=$("<td><input type='button' value='-' onclick='numfn(-1)'><span>1</span><input type='button' value='+' onclick='numfn(1)''></td>");
	//创建金额的td
	var moneytd=$("<td></td>");
	moneytd.text(price);
	//创建删除td
	var deltd=$("<td><input type='button' value='删除'onclick='delfn()'></td>");
	//创建tr并把所有td装进tr
	var tr=$("<tr></tr>");
	tr.append(nametd);
	tr.append(pricetd);
	tr.append(numtd);
	tr.append(moneytd);
	tr.append(deltd);
	//把tr装进第二个table里面
	$("#total").before(tr);
	calfn();
	})
})
//删除方法
function delfn(){
	//得到按钮所对应的tr并删除
	var obj=event.target||event.srcElement;
	$(obj).parent().parent().remove();
	calfn();
}
function numfn(x){
	//得到原来的数值
	var obj=event.target||event.srcElement;
	var oldCount=parseInt($(obj).siblings("span").text());
	var newCount=oldCount+x;
	if(newCount<1)
		{
			newCount=1;
		}
	$(obj).siblings("span").text(newCount);
	//得到单价
	var price= $(obj).parent().prev().text();
	//修改金额
	$(obj).parent().next().text(newCount*price);
	calfn();
}
//计算总价方法
function calfn(){
	var total=0;
	//得到第二个table里面所有的tr并遍历
	$("table:last tr").each(function (){
		//从tr中找到第四个孩子（金额td）
	var moneytd=$(this).children().eq(3);
		//从td中获取金额
		var money=parsrFloat(moneytd.text());
		if(!isNaN(money)){
			total+=money;
		}	
	})
	$("#total>td").text("总价："+total+"元");
}
</script>
</head>
<body>
<h1>特价商品</h1>
<table>
	<tr>
		<td>商品名称</td>
		<td>商品单价</td>
		<td>商品库存</td>
		<td>好评率</td>
		<td>操作</td>
	</tr>
		<tr>
		<td>水杯</td>
		<td>25</td>
		<td>3</td>
		<td>90%</td>
		<td>
			<input type="button" value="加入购物车">	
		</td>
	</tr>
		</tr>
		<tr>
		<td>鼠标</td>
		<td>50</td>
		<td>80</td>
		<td>95%</td>
		<td>
			<input type="button" value="加入购物车">
		</td>
	</tr>
		</tr>
		<tr>
		<td>价盘</td>
		<td>125</td>
		<td>30</td>
		<td>99%</td>
		<td>
			<input type="button" value="加入购物车">
		</td>
	</tr>
	</tr>
		</tr>
		<tr>
		<td>电视</td>
		<td>2000</td>
		<td>80</td>
		<td>85%</td>
		<td>
			<input type="button" value="加入购物车">
		</td>
	</tr>
</table>
<h1>购物车</h1>
<table>
	<tr>
		<th>商品名称</th>
		<th>商品单价</th>
		<th>商品数量</th>
		<th>金额</th>
		<th>操作</th>
	</tr>
	<tr id="total">
		<td colspan="5" > 总价：0元</td>
	</tr>
</table>


</body>
</html>
jq练习
