首页>>表单>>jquery 无刷新添加/删除 input行 实时计算购物车价格(2013-12-01)

jquery 无刷新添加/删除 input行 实时计算购物车价格

jquery 未来事件插件jq_Live_Extension.js

jquery 无刷新添加/删除 input行 实时计算购物车价格
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <script>  
  2.     $(document).ready(function(){  
  3.        //<tr/>居中  
  4.         $("#tab tr").attr("align","center");  
  5.          
  6.         //增加<tr/>  
  7.        $("#but").click(function(){  
  8.             var _len = $("#tab tr").length;          
  9.             $("#tab").append("<tr id="+_len+" align='center'>"  
  10.                                +"<td>"+_len+"</td>"  
  11.                                +"<td align='left'><input type='' name='product_id[]' value="" onFocus="this.value=''"/ class="order_form_product_description" id='product_id"+_len+"'></td>"  
  12.                                +"<td><input type='text' name='quantity[]' id='quantity"+_len+"' class='num-pallets-input' ></td>"  
  13.                                +"<td><input type='text' name='price[]' id='price"+_len+"' class='price-per-pallet'/></td>"  
  14.                                +"<td class='row-total'><span id='thistotal"+_len+"' class='row-total-input'></span></td>"  
  15.                                +"<td><a href='javascript:void(0)' onclick='deltr("+_len+")'><img src='form_del_icon.gif'></a></td>"  
  16.                            +"</tr>");              
  17.         })      
  18.    })  
  19.       
  20.     //删除<tr/>  
  21.     var deltr =function(index)  
  22.     {  
  23.        var _len = $("#tab tr").length;  
  24.         $("tr[id='"+index+"']").remove();//删除当前行  
  25.           
  26.        for(var i=index+1,j=_len;i<j;i++)  
  27.        {  
  28.             var nextTxtVal = $("#quantity"+i).val();  
  29.             var nextPriceVal= $("#price"+i).val();  
  30.             var nextproduct_idVal= $("#product_id"+i).val();  
  31.             var nextthistotalVal= $("#thistotal"+i).text();  
  32.             //alert (nextthistotalVal);  
  33.           $("tr[id='"+i+"']")  
  34.                 .replaceWith("<tr id="+(i-1)+" align='center'>"  
  35.                                +"<td>"+(i-1)+"</td>"  
  36.                                +"<td align='left'><input type='text' name='product_id[]' value='"+nextproduct_idVal+"' class="order_form_product_description" id='product_id"+(i-1)+"'></td>"  
  37.                                 +"<td><input type='text' name='quantity[]' value='"+nextTxtVal+"' id='quantity"+(i-1)+"' class='num-pallets-input'/></td>"  
  38.                                 +"<td><input type='text' name='price[]' class='price-per-pallet' name='price"+(i-1)+"' value='"+nextPriceVal+"' /></td>"  
  39.                                 +"<td class='row-total'><span class='row-total-input'>"+nextthistotalVal+"</span></td>"  
  40.                                +"<td><a href='javascript:void(0)' onclick='deltr("+(i-1)+")'><img src='form_del_icon.gif'></a></td>"  
  41.                            +"</tr>");  
  42.          }    
  43.   
  44.          calcProdSubTotal();  
  45.       
  46.   
  47.              
  48.  }  
  49. </script>  
  50. <body>  
  51.    <table id="tab" border="0" width="500" align="center" style="margin-top:20px">  
  52.         <tr>  
  53.             <td></td>  
  54.             <td align="left"><span class="red">*</span>Product Description</td>  
  55.             <td><span class="red">*</span>Quantity</td>  
  56.             <td><span class="red">*</span>Unit Price (USD)</td>  
  57.             <td>Amount(USD)</td>  
  58.             <td></td>  
  59.      </tr>  
  60.      <tr>  
  61.      <td>1</td>  
  62.      <td align="left"><input type="" name="product_id[]" value="" onFocus="this.value=''" class="order_form_product_description" /></td>  
  63.      <td><input type="text" class="num-pallets-input" name="quantity[]" onKeyPress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false"/></td>  
  64.      <td><input type="" class="price-per-pallet" name="price[]" onKeyPress="if (event.keyCode!=46 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false"></td>  
  65.      <td class="row-total"><span class="row-total-input"></span></td>   
  66.      <td></td>  
  67.      </tr>  
  68.        
  69.    </table>  
  70.      
  71.     <div style="margin-left:205px;margin-top:20px">  
  72.        <img src="add_more_products.gif" id="but" style="cursor:pointer"/>  
  73.     </div>  
  74.     <div style=" float:right; padding-right:50px; font-weight:bold">Total:<span class="red">US$<span id="product-subtotal">0</span></span><input type="hidden" name="product-subtotal" /></div>  
  75. </div>  

 


原文地址:http://www.freejs.net/article_biaodan_133.html