欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

购物车功能实现

程序员文章站 2024-03-20 13:59:28
...

大神跟我说学好基本的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里的,触发的还是加操作。。。。求助大神要。。

转载于:https://www.cnblogs.com/qiyueshihuang/archive/2011/11/02/2233571.html

上一篇: php会话(session)实现原理

下一篇: