购物车功能实现

大神跟我说学好基本的jquery只需要做好三个基本功能就好了,第一个是购物车。现在开始实践,css神马的就忽略简单点了。其实这个主要就是dom操作和选择器的应用。大神果然比较牛。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">table{width:100%;}</style>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<title>position</title>
</head>

<body>
<table id="product" border="1">
<tbody>
<tr><th>product number</th><th>price</th><th>choose</th></tr>
<tr><td>1</td><td>20</td><td><input type="checkbox" name="items" /></td>
<tr><td>2</td><td>100</td><td><input type="checkbox" name="items" /></td>
<tr><td>3</td><td>50</td><td><input type="checkbox" name="items" /></td>
<tr><td>4</td><td>10</td><td><input type="checkbox" name="items" /></td>
</tbody>
</table>
<h3>result:</h3>
<table id="choose" border="1">
<tbody>
<tr><th>product number</th><th>price</th><th>delete</th></tr>
</tbody>
</table>
<p id="result">total:<span>0</span></p>
<script type="text/javascript">
$(function(){
  //table style
   $('table tr:odd').css('background','#b1b1b1'); 	
   //choose appendto,compute result
   var $choose = $('#product').find('input');
   $($choose).click(function(e){
	   alert(1);
	   $(this).parents('tr').appendTo('#choose tbody');
	   var add = $(this).parent('td').prev().text();
	   var add1= parseInt(add,10);
	   var result = $('#result span').text();
	    var result1= parseInt(result,10);
		result1+=add1;
		$('#result span').text(result1);
	   });
	 var $delete = $('#choose').find('input');
       $($delete).click(function(e){
	   $(this).parents('tr').appendTo('#product tbody');
	   var add = $(this).parent('td').prev().text();
	   var add1= parseInt(add,10);
	   var result = $('#result span').text();
	    var result1= parseInt(result,10);
		result1-=add1;
		$('#result span').text(result1);
	   });
	   	
});
</script>
</div>
</body>
</html>

 遇到的问题,非常奇怪啊,做删除时,那个input所携带的事件还是在商品table里的,触发的还是加操作。。。。求助大神要。。

posted @ 2011-11-02 20:48  七月天青  阅读(521)  评论(2编辑  收藏  举报