用js实现购物车自动计价功能

       当选择修改数据后将自动计算每一个物品的的总价,并重新计算所有物品的总价.

因为没有做太多兼容性的东西,所以只在firefox下测试过.

DOM

 

<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><input type="text" value="1" /></td><td >1950</td><td >1950</td></tr>
        <tr><td >jsp_123</td><td >电脑</td><td><input type="text" value="1" /></td><td >1950</td><td>1950</td></tr>
        <tr><td >jsp_123</td><td >电脑</td><td><input type="text" value="1" /></td><td >1950</td><td >1950</td></tr>
        <tr><td>jsp_123</td><td>电脑</td><td><input type="text" value="1" /></td><td>1950</td><td>1950</td></tr>
     </tbody>
     <tfoot>
       <tr><td>总计:</td><td colspan="4">7800</td></tr>
     </tfoot>
   </table>
</div>
<input type="button"   οnclick="GetInAll()" value="计算" />

 

JS:

 

    <title>购物车自动计价</title>
    <script type="text/javascript" src="misc/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $("table input").blur(function(oEven){
    
     var num=oEven.target.parentNode.parentNode.cells[2].firstChild.value;
     var price=oEven.target.parentNode.parentNode.cells[3].textContent;
     var count=parseFloat(num)*parseFloat(price);//计算单个物品价格

    oEven.target.parentNode.parentNode.cells[4].textContent=count;
    GetInAll();//计算所有物品价格
    });
    })
   
    function GetInAll()
    {
    var table=document.getElementById("PriceTable");
    var oBody=table.tBodies[0];
    var oFoot=table.tFoot;
   
    var rows=oBody.rows;
    var priceCount=0;
   
    for(var i=0;i<rows.length;i++)
    {
     var tempData=rows[i].cells[4].textContent;
     priceCount=parseFloat(priceCount)+parseFloat(tempData);

    }
    alert(priceCount);
    oFoot.rows[0].cells[1].textContent=priceCount;
    
    }
    </script>

    <style type="text/css">
     table input[type=text]{ width:32px;}
    </style>