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

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

上一篇:【错误记录】国际化报错 ( “xxx“ is not translated in “zh“ (Chinese) )


下一篇:iOS开发UI篇—UIScrollView控件介绍