• jQuery形式可以计算,它包含了无线电的变化价格,select价格变化,删除行动态计算加盟


    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="250px">Item Name</td>  
    5.     <td style="150px">Item Price</td>  
    6.     <td style=" 50px">Qty</td>  
    7.     <td style=" 80px">Discount</td>  
    8.     <td style="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
  • 相关阅读:
    寒假学习进度报告(一)
    【web】公文流转系统制作进度(一)(2019/12/9)
    【规律】A Rational Sequence
    【记忆化搜索】Happy Happy Prime Prime
    【背包问题】PACKING
    【动态规划】正则表达式匹配
    【数据结构】P1310 表达式的值
    【数据结构】P1449 后缀表达式
    【数据结构】P1054 等价表达式
    【数据结构】表达式求值
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/5034136.html
Copyright © 2020-2023  润新知