jquery学习笔记-购物车表单简单实现

购物车主html代码：

  

    

      

        
Item
        
Quantity
        
Price
        
Total
      
    
    

      

        
Subtotal
        

        

        
$152.95
      
      

        
Tax
        

        
6%
        
$9.18
      
      

        
Shipping
        
5
        
$2 per item
        
$10.00
      
      

        
Total
        

        

        
$172.13
      
      

        

        

        

        

      
    
    

      

        
Building Telephony Systems With Asterisk
        

        
$26.99
        
$26.99
      
      

        
Smarty PHP Template Programming and Applications
        

        
$35.99
        
$71.98
      
      

        
Creating your MySQL Database: Practical Design Tips and Techniques
        

        
$17.99
        
$17.99
      
      

        
Drupal: Creating Blogs, Forums, Portals, and Community Websites
        

        
$35.99
        
$35.99
      
    
  


    
Shipping to:
    Ford Prefect
  

shipping.js代码：

$(document).ready(function(){
	var stripe = function(){
		$('#cart tbody tr:visible:even').removeClass('odd').addClass('even');
		$('#cart tbody tr:visible:odd').removeClass('even').addClass('odd');
	};
	
	stripe();
	
	$('.quantity input').keypress(function(event){
		if (event.charCode && (event.charCode < 48 || event.charCode > 57)){
			event.preventDefault();
		}
	});
	
	$('.quantity input').change(function(){
		var totalQuantity = 0;
		var totalCost = 0;
		$('#cart tbody tr').each(function(){
			var price = parseFloat($('.price',this).text().replace(/^[^\d.]*/,''));
			price = isNaN(price) ? 0 : price;
			var quantity =  parseInt($('.quantity input',this).val());
			var cost = quantity * price;
			$('.cost',this).text('$' + cost.toFixed(2));
			totalQuantity += quantity;
			totalCost += cost;
		});
		$('.shipping .quantity').text(String(totalQuantity));
		var shippingRate = parseFloat($('.shipping .price').text().replace(/^[^\d.]*/,''));
		var shipping = totalQuantity * shippingRate;
		$('.shipping .cost').text('$' + shipping.toFixed(2));
		totalCost += shipping;
		$('.subtotal .cost').text('$' + totalCost.toFixed(2));
		
		var taxRate = parseFloat($('.tax .price').text()) / 100;
		var tax = Math.ceil(totalCost * taxRate * 100) / 100;
		$('.tax .cost').text('$' + tax.toFixed(2));
		totalCost += tax;
		
		$('.total .cost').text('$' + totalCost.toFixed(2));
	});
	
	$('#recalculate').hide();
	
	$(' ').insertAfter('#cart thead th:nth-child(2)');
	$('#cart tbody tr').each(function(){
		$deleteButton = $('').attr({
			'width':'16',
			'height':'16',
			'src':'images/del.png',
			'alt':'remove from cart',
			'title':'remove from cart',
			'class':'clickable'
		}).click(function(){
			$(this).parents('tr').find('.quantity input').val(0).trigger('change')
			  .end().hide();
			stripe();
		});
		$('').insertAfter($('td:nth-child(2)',this))
		  .append($deleteButton);
	});
	$(' ').insertAfter('#cart tfoot td:nth-child(2)');
});

$(document).ready(function(){
	var editShipping = function(){
		$.get('shipping.php',function(data){
			$('#shipping-name').remove();
			$(data).hide().appendTo('#shipping').slideDown();
			$('#shipping form').submit(saveShipping);
		});
		return false;
	};
	var saveShipping = function(){
		var postData = $('#shipping :input').serialize();
		$.post('shipping.php',postData,function(data){
			$('#shipping form').remove();
			$(data).appendTo('#shipping');
			$('#shipping-name').click(editShipping);
		});
		return false;
	};
	$('#shipping-name').click(editShipping);
});

服务器端代码(shipping.php)：

Ford Prefect';
}else{
	?>
	

  First name:
  

  Address: