jquery基础教程的第八章-购物che

来源：互联网发布：玻璃面板橱柜知乎编辑：程序博客网时间：2024/05/17 06:07

前端代码：就是侧边栏没有效，因为后台没有传数据也不会写，如果高手会的可以帮个忙阿  谢谢拉！环境：lampp<!--To change this template, choose Tools | Templatesand 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>