首页>>表单>>jQuery可以计算的表单，包括单选改变价格，select改变价格，动态添加删除行计算(2013-12-08)

jQuery可以计算的表单，包括单选改变价格，select改变价格，动态添加删除行计算

 各种表单情况的计算

jQuery可以计算的表单，包括单选改变价格，select改变价格，动态添加删除行计算
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2. var currentRow = 3;  
  3. $(document).ready(function(){  
  4.     $('#calx').calx();  
  5.       
  6.     $('#add_item').click(function(){  
  7.         var $calx = $('#calx');  
  8.         currentRow++;  
  9.           
  10.         $calx.append('<tr> 
  11.             <td><input type="text" id="A'+currentRow+'" value="" /></td> 
  12.             <td><input type="text" id="B'+currentRow+'" value="" data-format="$ 0,0[.]00" /></td> 
  13.             <td><input type="text" id="C'+currentRow+'" value="" data-format="0" /></td> 
  14.             <td><input type="text" id="D'+currentRow+'" value="" data-format="0[.]00 %" /></td> 
  15.             <td><input type="text" id="E'+currentRow+'" value="" data-format="$ 0,0[.]00" data-formula="($B'+currentRow+'*$C'+currentRow+')*(1-$D'+currentRow+')" /></td> 
  16.             <td><input type="button" value="remove" class="btn-remove" /></td> 
  17.         </tr>');  
  18.           
  19.         //update total formula  
  20.         $('#F1').attr('data-formula','SUM($E1,$E'+currentRow+')');  
  21.         $calx.calx('refresh');  
  22.     });  
  23.   
  24.     $('#calx').on('click', '.btn-remove', function(){  
  25.         $(this).parent().parent().remove();  
  26.         $('#calx').calx('refresh');  
  27.     });  
  28. });  
  29.    </script>  

 

XML/HTML Code
  1. <table id="calx" width="80%" align="center">  
  2. <thead>  
  3.     <tr>  
  4.     <td style="width:250px">Item Name</td>  
  5.     <td style="width:150px">Item Price</td>  
  6.     <td style="width: 50px">Qty</td>  
  7.     <td style="width: 80px">Discount</td>  
  8.     <td style="width:150px">Sub Total</td>  
  9.        <Td></Td>  
  10.     </tr>  
  11. </thead>  
  12. <tbody id="itemlist">  
  13.     <tr>  
  14.         <td><input type="text" id="A1" value="HDD Baracuda Black 2TB" /></td>  
  15.         <td><input type="text" id="B1" value="" data-format="$ 0,0[.]00" /></td>  
  16.         <td><input type="text" id="C1" value="" data-format="0" /></td>  
  17.         <td><input type="text" id="D1" value="" data-format="0[.]00 %" /></td>  
  18.         <td><input type="text" id="E1" value="" data-format="$ 0,0[.]00" data-formula="($B1*$C1)*(1-$D1)" /></td>  
  19.         <td><input type="button" value="remove" class="btn-remove" /></td>  
  20.     </tr>  
  21.     <tr>  
  22.         <td><input type="text" id="A2" value="BenQ LED Monitor 21 inch" /></td>  
  23.         <td><input type="text" id="B2" value="" data-format="$ 0,0[.]00" /></td>  
  24.         <td><input type="text" id="C2" value="" data-format="0" /></td>  
  25.         <td><input type="text" id="D2" value="" data-format="0[.]00 %" /></td>  
  26.         <td><input type="text" id="E2" value="" data-format="$ 0,0[.]00" data-formula="($B2*$C2)*(1-$D2)" /></td>  
  27.         <td><input type="button" value="remove" class="btn-remove" /></td>  
  28.     </tr>  
  29.     <tr>  
  30.         <td><input type="text" id="A3" value="Intel Processor i3 2328" /></td>  
  31.         <td><input type="text" id="B3" value="" data-format="$ 0,0[.]00" /></td>  
  32.         <td><input type="text" id="C3" value="" data-format="0" /></td>  
  33.         <td><input type="text" id="D3" value="" data-format="0[.]00 %" /></td>  
  34.         <td><input type="text" id="E3" value="" data-format="$ 0,0[.]00" data-formula="($B3*$C3)*(1-$D3)" /></td>  
  35.         <td><input type="button" value="remove" class="btn-remove" /></td>  
  36.     </tr>  
  37. </tbody>  
  38. <tfoot>  
  39.     <tr>  
  40.     <td colspan="4" style="text-align: right">Total Price :</td>  
  41.     <td id="F1" data-format="$ 0,0[.]00" data-formula="SUM($E1,$E3)"></td>  
  42.        <Td></Td>  
  43.     </tr>  
  44. </tfoot>  
  45.    </table>  
  46.    <input type="button" value="Add new item" id="add_item" />  

 


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