本人用jquery写的简明版本购物车

最新推荐文章于 2023-02-02 23:48:46 发布

mayakovsky

最新推荐文章于 2023-02-02 23:48:46 发布

阅读量989

点赞数

分类专栏： js前端文章标签： jquery js javascript 源代码 html

本文链接：https://blog.csdn.net/zhukova/article/details/18313807

版权

js前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

废话不多说直接贴上源代码

<!DOCTYPE>
<HTML>
	<head>
		<meta http-equiv="Content" type="Content"></meta>
		<script language="javascript" type="text/javascript" src="js/jquery-1.9.1.js"></script>
		<script language="javascript" type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
		<script language="javascript" type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
		<script language="javascript" type="text/javascript" src="js/jqueryday06.js">
		</script>
	</head>
	<body>
		<form action="" method="post">
			<table>
				<thead>
					<tr>
						<th>我的购物车</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Hadoop实战</td>
						<td>58.90</td>
						<td><input type="button" value="+" id="add"/><input type="text" value=1 id="purchaseCount"><input type="button" value="-" id="decrease"></td>
						<td>58.90</td>
						<td>删除</td>
					</tr>
					<tr>
						<td>Hadoop教程</td>
						<td>48.60</td>
						<td><input type="button" value="+" id="add"/><input type="text" value=1 id="purchaseCount"><input type="button" value="-" id="decrease"></td>
						<td>48.60</td>
						<td>删除</td>
					</tr>
					<tr>
						<td>Hadoop权威指南</td>
						<td>158.90</td>
						<td><input type="button" value="+" id="add"/><input type="text" value=1 id="purchaseCount"><input type="button" value="-" id="decrease"></td>
						<td>158.90</td>
						<td>删除</td>
					</tr>
					<tr>
						<td>HadoopMapReduce架构</td>
						<td>68.90</td>
						<td><input type="button" value="+" id="add"/><input type="text" value=1 id="purchaseCount"><input type="button" value="-" id="decrease"></td>
						<td>68.90</td>
						<td>删除</td>
					</tr>
				</tbody>
			</table>
		</form>
		<div>
			<div>合计：
				<div id="sum"></div>
			</div>
		</div>
	</body>
</HTML>

下面是js代码片段

//购物车案例
$(document).ready(function(){
	var addArr=$("input#add").toArray();
	var purchaseArr=$("input#purchaseCount").toArray();
	var deArr=$("input#decrease").toArray();
	for(var i=0;i<addArr.length;i++){	
		addArr[i].οnclick=function(){
			var num=$(this).parent().parent().index();
			var tdArr=$(this).parent().parent().children().toArray();
			var price=parseFloat(tdArr[1].innerHTML);
			var count=parseFloat(purchaseArr[num].value);
			count++;
			purchaseArr[num].value=count;
			var sum=(price*count).toFixed(2);
			tdArr[3].innerHTML=parseFloat(sum);	
			getSum();
		};
		deArr[i].οnclick=function(){
			var num=$(this).parent().parent().index();
			var tdArr=$(this).parent().parent().children().toArray();
			var price=parseFloat(tdArr[1].innerHTML);
			var count=parseFloat(purchaseArr[num].value);
			if(count>0){
				count--;	
			}
			purchaseArr[num].value=count;
			var sum=(price*count).toFixed(2);
			tdArr[3].innerHTML=parseFloat(sum);	
			getSum();
		}
		getSum();
	}
	function getSum(){
		var sumprice=0;
		var trArr=$("tbody").children().toArray();
		for(var i=0;i<trArr.length;i++){
			var tdArrs=$(trArr[i]).children().toArray();
			var sums=parseFloat(tdArrs[3].innerHTML);
			sumprice=sumprice+sums;
		}
	    document.getElementById("sum").innerHTML=sumprice.toFixed(2);
	}
});

我现在觉得javascript就是不如jquery来的方便啊！