购物车前台页面代码

jerry thinkphp 2015年11月18日 收藏
购物车前台页面代码, 这只是个小例子, 具体可以自由发挥
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车自动计价</title>
    <script type="text/javascript" src="jquery-min.js"></script>
    <script type="text/javascript">
    $(function(){
           $(".se").change(function(oEven) {
            var num = $(this).find("option:selected").text();
            var price = $(this).parent().next().text();
            $(this).parent().next().next().text(num*price);
            GetInAll();//计算所有物品价格
           });
    })
    
    function GetInAll()
    {
        var len = $("#PriceTable tbody").children("tr").length;
        var priceCount=0;
        for(var i=0;i<len;i++)
        {
            // var tempData=rows[i];
            var price1 = $("#PriceTable tbody tr:eq("+i+") td:eq(4)").text();
             priceCount=parseFloat(priceCount)+parseFloat(price1);
        }
        $("#PriceTable tfoot tr td:eq(1)").text(priceCount);
    }
    </script>
    <style type="text/css">
     table input[type=text]{ width:32px;}
    </style>
</head>
<body>

    <div>
       <table id="PriceTable">
         <thead><tr><td>物品编号</td><td>物品名称</td><td >数量</td><td>价格</td><td>小计</td></tr></thead>
         <tbody>
            <tr>
                <td >jsp_123</td>
                <td >电脑</td>
                <td>
                    <select name="se" class="se">
                        <option value="1">1</option>
                        <option value="1">2</option>
                        <option value="1">3</option>
                        <option value="1">4</option>
                        <option value="1">5</option>
                    </select>
                </td>
                <td >1950</td>
                <td >1950</td>
            </tr>
            <tr>
                <td >jsp_123</td>
                <td >电脑</td>
                <td>
                    <select name="se" class="se">
                        <option value="1">1</option>
                        <option value="1">2</option>
                        <option value="1">3</option>
                        <option value="1">4</option>
                        <option value="1">5</option>
                    </select>
                </td>
                <td >1950</td>
                <td >1950</td>
            </tr>
            <tr>
                <td >jsp_123</td>
                <td >电脑</td>
                <td>
                    <select name="se" class="se">
                        <option value="1">1</option>
                        <option value="1">2</option>
                        <option value="1">3</option>
                        <option value="1">4</option>
                        <option value="1">5</option>
                    </select>
                </td>
                <td >1950</td>
                <td >1950</td>
            </tr>
           
         </tbody>
         <tfoot>
           <tr><td>总计:</td><td colspan="4">5850</td></tr>
         </tfoot>
       </table>
    </div>
    <input type="button"   onclick="GetInAll()" value="计算" />
</body>
</html>