前端代码：
就是侧边栏没有效，因为后台没有传数据
也不会写，如果高手会的可以帮个忙阿 谢谢拉！
环境：lampp
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type ="text/css">
thead{background-color: blue;}
#cart{border: solid 1px #000;border-collapse: collapse;float:left;}
tfoot{border-bottom: solid 1px #000;}
.subtotal,.tax,.shipping,.total,.actions{border-bottom: solid 1px #000;}
.even{background-color: #ccc;}
.odd{background-color: #ddd}
.shippingto{border-collapse: separate;border-spacing: 10px 10px;border: 1px solid #000;float:left;margin-left:10px;}
.shippingto td{text-align: center;}
.shippingto td a{font-size: 12px;text-align:center}
</style>
<script language ="javascript" type="text/javascript" src =" ../js/jquery.min.js"></script>
<script language ="javascript" type="text/javascript">
$(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();
$('#recalculate').hide();
$('.quantity input').keypress(function(event){//输入掩码
if(event.charCode && (event.charCode < 48 || event.charCode > 57))
{
event.preventDefault();
}
}).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;//计算商品总价 }); $('.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; $('.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;//计算最终的费用 $('.total .cost').text('
+ totalCost.toFixed(2)); }); $('<th> </th>').insertAfter('#cart thead th:nth-child(2)'); $('#cart tbody tr').each(function(){ $deleteButton = $('<img/>').attr({ 'width':'16', 'height':'16', 'src':'', 'alt':'remove from cart', 'class':'clickable' }).click(function(){//删除商品 $(this).parents('tr').find('.quantity input').val(0).trigger('change').end().hide(); stripe(); }); $('<td></td>').insertAfter($('td:nth-child(2)',this)).append($deleteButton); }); $('<td> </td>').insertAfter('#cart tfoot td:nth-child(2)'); }); $(document).ready(function(){ var editShipping = function(){ //$('#shipping-name').click(function(){ $.get('shoping.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('shoping.php',postData,function(data){ $('#shipping form').remove(); $(data).appendTo('#shipping'); $('#shipping-name').click(editShipping); }); return false; }; $('#shipping-name').cilck(editShipping); }); </script> </head> <body> <!-- 输入掩码 --> <form action ="shoping.php" method ="post"> <table id ="cart"> <thead> <tr> <th class ="item">Item</th> <th class ="quantity">Quantity</th> <th class ="price">Price</th> <th class ="cost">Total</th> </tr> </thead> <tbody> <tr> <td class =" item">Building Telephony System With Asterisk</td> <td class ="quantity"> <input type ="text" name="quantity-2" value ="1" id ="quantity-2" maxlength="3" /> </td> <td class =" price">$26.99</td> <td class ="cost">$26.99</td> </tr> <tr> <td class =" item">Sarty PHP Template Programming and Applications</td> <td class ="quantity"> <input type ="text" name="quantity-1" value ="2" id ="quantity-1" maxlength="3" /> </td> <td class =" price">$35.99</td> <td class ="cost">$71.98</td> </tr> <tr> <td class =" item">Creating your Mysql Database:Practical Design Tips and Techiques</td> <td class ="quantity"> <input type ="text" name="quantity-3" value ="1" id ="quantity-3" maxlength="3" /> </td> <td class =" price">$17.99</td> <td class ="cost">$17.98</td> </tr> <tr> <td class =" item">Drupal:Creating Blogs,Forums,Portals,and Community Websites</td> <td class ="quantity"> <input type ="text" name="quantity-4" value ="1" id ="quantity-4" maxlength="3" /> </td> <td class =" price">$35.99</td> <td class ="cost">$35.98</td> </tr> </tbody> <tfoot> <tr class =" subtotal"> <td class =" item">Subtotal</td> <td class ="quantity"></td> <td class ="price"></td> <td class ="cost">$152.95</td> </tr> <tr class =" tax"> <td class =" item">Tax</td> <td class ="quantity"></td> <td class ="price">6%</td> <td class ="cost">$9.18</td> </tr> <tr class =" shipping"> <td class =" item">Shipping</td> <td class ="quantity">5</td> <td class ="price">$2 per item</td> <td class ="cost">$10.00</td> </tr> <tr class =" total"> <td class =" item">Total</td> <td class ="quantity"></td> <td class ="price"></td> <td class ="cost">$172.13</td> </tr> <tr class =" actions"> <td></td> <td><input type="button" id ="recalculate" name="recalculate" value="Recalculate"></td> <td></td> <td><input type="submit" id ="submit" name="submit" value="Place Order"></td> </tr> </tfoot> </table> <table class ="shippingto"> <thead> <tr> <td>Shipping to:</td> </tr> </thead> <tbody> <tr> <td><a href="#" id ="shipping-name">Ford Prefect</a></td> </tr> </tbody> </table> </form> </body></html>
